I've built a React project using CRA. I need to use a plugin that is built using jquery. It's a datepicker but the calendar it's using is Bikram Sambat. The link to the datepicker code is Nepali Date Picker . I've done the following:
public/index.html
<link href="%PUBLIC_URL%/assets/nepaliDatePicker.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="%PUBLIC_URL%/assets/nepaliDatePicker.min.js"></script>
NepaliDate Component
import React, { Component } from 'react';
const $ = window.$;
export default class NepaliDate extends Component {
shouldComponentUpdate() {
return false;
}
componentDidMount() {
$('.date-picker').nepaliDatePicker({
dateFormat: '%D, %M %d, %y',
closeOnDateSelect: true
});
}
showDatePicker = () => {
$('.date-picker').nepaliDatePicker();
};
render() {
return (
<input
type="text"
value=""
name="date"
className="date-picker"
onFocus={this.showDatePicker}
/>
);
}
}
The datepicker isn't showing up.
Can use "react-load-script" to load 3rd part JS libraries. After install can use like below
import Script from 'react-load-script'
render(){
return(
<div>
<Script url="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"/>
<Script url="menu.js"/>
//.....Remaining code can be here
</div>
);
}
Just follow instruction showed on Nepali-Date-Picker github page, install library with npm install and add CDN link to your html file inside public folder inside head element above root element, hope this resolve your issue.
Related
I'm using a Symfony-based react application and am trying to include a datepicker using the react-datepicker module.
I can create the datepicker object, but it does not appear to be styled correctly - when I click to select the date, there is just a vertical list of numbers that go to the top of the page (I've seen lots of people experience this online, often because they have not imported the datepicker css).
I am importing the react-datepicker.css file and if I inspect my datepicker object in the browser it says: class="react-datepicker-wrapper", so I presume that the import is working.
I am wondering whether I also need to do something else to another file within my application, perhaps to the webpack file, or maybe something else Symfony-related, but I'm a real novice with those things and am a bit stuck.
Your help would be much appreciated! Code below!
import DatePicker from "react-datepicker";
import "../../../node_modules/react-datepicker/dist/react-datepicker.css";
class MyWidget extends Component {
constructor(props) {
super(props);
this.state = {
startDate: new Date()
}
}
handleCalendarClose() {
console.log("Calendar closed")
}
handleCalendarOpen() {
console.log("Calendar opened")
}
setStartDate(startDate) {
this.setState({
startDate: startDate
});
};
render() {
const { startDate } = this.state;
return (
<div>
From: <DatePicker
selected={startDate}
onChange={startDate => this.setStartDate(startDate)}
onCalendarClose={this.handleCalendarClose}
onCalendarOpen={this.handleCalendarOpen}
/>
</div>
);
}
}
}
From the docs at: https://github.com/Hacker0x01/react-datepicker
You will also need to require the CSS file from this package (or
provide your own). The example below shows how to include the CSS from
this package if your build system supports requiring CSS files
(Webpack is one that does).
add this line to your code...
import "react-datepicker/dist/react-datepicker.css";
For example...
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
const Example = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
);
};
Import like this, it is working for me
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
I have a react app and I want to set up adyen (payment processing API) in that. I want to use the checkout SDK (https://docs.adyen.com/developers/checkout/web-sdk )as its very simple,
I have moved the js logic to componentDidMount, but having problem loading the sdk,
<script type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.6.3.min.js"></script>
So I can use the below function from SDK:
chckt.hooks.beforeComplete = function(node, paymentData) {
return false; // Indicates that you want to replace the default handling.
};
I have tried using react-script-tag, in my React component:
render() {
return (
<div className='checkout-warpper'>
<ScriptTag type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.9.2.min.js" />
<div className="checkout" id="adyen-checkout">
{/* The checkout interface will be rendered here */}
</div>
</div>
);
}
but still get the error:
Uncaught ReferenceError: chckt is not defined.
Try window.chckt.hooks.beforeComplete = ... chckt is a global scope variable.
The easiest way to load external script is by using react-async-script-loader
import React from 'react';
import scriptLoader from 'react-async-script-loader'
class CheckoutSDK extends React.Component {
componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
if (isScriptLoadSucceed) {
window.chckt.hooks.beforeComplete = function(node, paymentData) {
return false; // Indicates that you want to replace the default handling.
};
}
}
}
render() {
return null
}
}
export default scriptLoader('https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.6.3.min.js',)(CheckoutSDK)
you can try using import ScriptLoader from 'react-script-loader-hoc'; and you can find on window.chckt.
I have a React component that I want to inject into the DOM. This is because my JS will be loaded through a script tag by other website owners, not loaded onto a SPA under my control.
What I want to do is append my Root component into the body of the webpage.
If I do something like this, then it replaces all the contents of my body, which is not what I want.
import React from "react";
import ReactDOM from "react-dom";
class Root extends React.Component {
render() {
return <div>heyyyyyyy</div>;
}
}
if (!module.parent) {
ReactDOM.render(<Root />, document.querySelector("body")); // <-- wrong
}
I want something like document.querySelector("body").appendChild(<Root />). Is this possible?
If you opt for a one-liner :
ReactDOM.render(
<Root />,
document.body.appendChild(document.createElement("DIV"))
)
Running Example:
class Root extends React.Component {
render() {
return <div>It works!</div>;
}
}
ReactDOM.render(
<Root />,
document.body.appendChild(document.createElement("DIV"))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<body></body>
Create the root element and append it to the DOM yourself
const rootEl = document.createElement('div')
document.body.appendChild(rootEl)
class Root extends React.Component {
render () {
return <div>heyyyyyyy</div>
}
}
ReactDOM.render(
<Root />,
rootEl
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div>don't replace me</div>
I put my extended and complex answer cause it may help if you need to import one/multiple react components without npm in server side render:
You may go without NPM/Webpack but you gotta use babel:
In my case it is server side rendering, that's why i cannot use npm
First: import all dependencies and put your main module like this to html :
<script type="module" src="/jsx/mainPage.js"></script>
//specify js, not jsx because babel compiles jsx files to js
<script>
new mainPage({
containerID: "${parentID}"
})
</script>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
//since babel-watched is used, you dont need babel cdn lib anymore
Second: write your jsx in the next way
//my MainPage.jsx
{ ChildPageComponent } from './childPage.js';
window.MainPage = function(props) {
ReactDOM.render(<MainPageComponent constainerID={props.containerID}/>,
document.getElementById(props.containerID));
}
class MainPageComponent extends React.Component {
render() {
return <ChildPageComponent/>
}
... }
my child page.jsx
export class ChildPageComponent extends React.Component {
render(){
return(<div>helloword</div>)
}
}
But the most helpful is Babel watcher. This bash script helps to install and run babel-watcher. You gotta specify your pathes for source and compiled project files
#!/bin/bash
if [ ! -d "node_modules" ]; then
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
fi
SOURCES=~/Documents/yourpath/project/jsx
OUT=~/Documents/yourpath/project/jsx
npx babel --watch $SOURCES --out-dir $OUT --presets react-app/prod
Sure it help you because i was looking for this way for a long
trust we all doing great...I am currently building a react application also making use of redux, I am having an issue trying to close modal in bootstarp programmatically, I am using bootstrap 4, and jquery 3.3.1... I have tried this:
onSubmit(event) {
event.preventDefault();
this.props.editBusinessAction(this.props.id, this.state)
.then((message) => {
$('#modal').modal(hide)
toastrOption();
toastr.success(message);
})
.catch((message) => {
toastrOption();
toastr.error(message);
console.log(message);
});
}
Try putting hide in quotes like this:
onSubmit(event) {
event.preventDefault();
this.props.editBusinessAction(this.props.id, this.state)
.then((message) => {
$('#modal').modal('hide')
toastrOption();
toastr.success(message);
})
.catch((message) => {
toastrOption();
toastr.error(message);
console.log(message);
});
}
$('#modal').modal('hide') this works only when you import jquery and bootstrap in your entry component.
install jquery and bootstrap and import jquery in your starting component eg: App.js like below
npm install -s jquery#2.2.3 bootstrap#3.3.6
App.js
import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
export default class extends Component {
render(){
return (
<div>App component</App>
)
}
}
I am developing an app in react js for that, I am using an HTML/CSS/Javascript based template. I am trying to create navbar. This includes adding few scripts in the code. How to include the scripts in React JS?
This is my code, which is currently giving error:
class TopNavBar extends Component {
state = {
loading: true
}
componentDidMount() {
const scripts = [
'../../assets/global/plugins/jquery.min.js',
'../../assets/global/plugins/bootstrap/js/bootstrap.min.js',
'../../assets/global/plugins/js.cookie.min.js',
'../../assets/global/scripts/app.min.js'
];
for (let i = 0; i < scripts.length; i++) {
const addScript = document.createElement('script');
addScript.setAttribute('src', scripts[i]);
document.body.appendChild(addScript);
}
}
render () {
return (
<div>
<div className="page-header navbar navbar-fixed-top">
<div className="page-header-inner ">
<div className="page-logo">
<img src={logo } style={{width: '40px', height: '40px'}} alt="logo" className="logo-default" />
<div className="menu-toggler sidebar-toggler">
</div>
</div>
</div>
</div>
</div>
)
}}export default TopNavBar
When I run this, I get error:
TopNavBar.js:24 GET http://localhost:3000/assets/global/plugins/jquery.min.js net::ERR_ABORTED
what is the correct way of adding template javascript files in ReactJS app?
npm install jquery --save
npm install --save bootstrap
npm install react-cookie --save
Run the above command on the terminal and then include the below line in your script
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import { withCookies, Cookies } from 'react-cookie';
import './app.min.js';
Go to this link (https://www.npmjs.com/package/package), you can search all the required package and their documentation.