I want to use jquery.scrollbar plugin in my react application. I want the jquery.scrollbar for every component which is scrollable. I have already installed it via npm. I am not getting any way to initialize it in my react component. How should I do it?
Always remember to import it in your components and called the function inside your JSX. I believe react js has some nice scrollbar which are more suitable
http://malte-wessel.github.io/react-custom-scrollbars/
Related
I would like to use an existing React component I have and use it to make a PDF. Is there a way to do this from a backend API in express?
I have tried importing the React component in express but then I start facing issues related to using import statements in the React file. Changing to require doesn’t fix the issue
I am new to react js. I am building one application using React and Larave but I don't know how to include non-react libraries into the react-laravel application. I have used the componentDidMount function to include the file, which is getting include in the document but it's not getting executed.
With "componentDidMount" you are in a React component. You might have any non-React JavaScript code there, but React will only apply what it gets back from a component. It is not possible to add some "side effects" to React components, i.e. doing arbitrary JS additionally to React's rendering.
I already have a built website with Express and I wanted to use React just in some pages. How is the best way to add it having all the resources that I have using the create-react-app?
I know I can add each script to the HTML file, but that is kind of error prone and laborious. I just wanted to be able to do all the import and manage the files the same way I do with an application using create-react-app.
If you only want to use React in some already existing pages, I would suggest you to go through importing the script as React documentation talks about here. It gives you a nice and short example on how to do add react components to existing html pages. You only need to import the react and react-dom dependencies once in your html entry-point (probably index.html), then in each page you only import the required components.
The other alternative is to follow the idea in this guide, to build the app using both create-react-app and express. You would want to move all the html code into React components and handle everything from React, and you will be able to manage all the project structure like you wish. But I believe this is more error prone and a lot of effort, if you only want to add React to build some componentes in just some pages.
tried
npm install --save bootstrap.native
loaded import 'bootstrap.native/dist/bootstrap-native-v4.js'; in index.js file in create-react app.
Expected Result:
converting bootstrap component (navbar, modal, alert, popup...) to jsx and creating react component should work as expected in bootstrap v4.
Problem:
Works when pasted directly in index.html but does not work when tried to render through component.
This shows bootstrap native is loaded properly, but it seems to be working only if bootstrap code is in DOM, but not on " create react app" rendered code.
Also any suggestion on, using bootstrap component as react component without use of jquery or any react-bootstrap library(something native implementation) will be welcome.
I am using BSN but not together with react:Reason bootstrap.native uses the browser DOM, which is going to wreck havoc with React's virtual DOM. In short: Don't do it!
to say it more direct: React is a whole different way of doing things. React support is out of scope for bootstrap.native. It would require a completely separate codebase.
Use react-bootstrap it is a complete rewrite of bootstrap.js (and also no jQuery)From the developers:
React-Bootstrap replaces the Bootstrap JavaScript. Each component has
been built from scratch as a true React component, without unneeded
dependencies like jQuery
I'm using create-react-app-typescript to create a react application. What I'm trying to do is to build the application, then include the resulting js and CSS files into another application (which is a very old application that doesn't know anything about React or any new JavaScript features)
My problem: I want to be able to pass information to my React application; for example, I want to specify an array to be used to display information, but the issue is that as soon as I add a <script> tag to React's js file, it will try to create the application under the target div element.
Not sure if it's a good idea, but I try to avoid ejecting my React application as much as possible so that I wouldn't need to maintain everything myself.
One solution that I thought of was to create an item in localStorage and then read it from my React app, and this somehow solves the issue, but is this a good way to do it?
And then there's another issue: I want to be able to pass a callback from the external application to be called from my React app to cause something to happen in my external application, and this cannot be done using localStorage
Any help or tip is deeply appreciated,
Thank you
You don't have to eject the project at all. One possible solution (maybe not the best) is just to change your index.js to expose your application. Thus instead of directly "rendering" the app do something like following
// needed imports
window.startFromOutside = function(element, callback) {
ReactDOM.render(<ReactApp cb={callback} />, element)
}
That way you can bootstrap your react application from outside passing any properties you want.