I have a react application that needs to be able to be display in both a light and dark theme.
The two themes I am using are "bootstrap-darkly" and "bootstrap-flatly".
This is what my index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import registerServiceWorker from './registerServiceWorker';
// import 'bootstrap/dist/css/bootstrap.min.css';
import './bootstrap-darkly.min.css';
import './lib/sb-admin/sb-admin.min.css';
import './lib/fontawesome-free/css/all.css';
import './index.css';
import 'jquery/dist/jquery';
import 'bootstrap/dist/js/bootstrap.bundle';
import './prototypes';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Changing the line "import './bootstrap-darkly.min.css';" to "import './bootstrap-flatly.min.css';" achieves the desired result of changing the theme across the application, but I'd like this to be toggled via the UI.
Where / how would the correct approach be to change this via the UI? How can I modify what CSS is imported on that aforementioned line via the UI?
I understand this would probably be best done via a user settings page but am unclear how to make this change using JS.
Related
I'm not able to write the code inside the index.js file. I wrote the code as per the code sandbox section of cube docs. It sends a console warning that my app may work as React 17. When I followed 18.1.0 conventions the page was shown loading and never stopped. Any solution to this?
It's written like this currently and I've added CubeProvider to access cubejsapi at app.js file while setting up routes, which is working fine.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AuthProvider } from './context/AuthProvider';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<AuthProvider>
<App />
</AuthProvider>
</React.StrictMode>,
document.getElementById('root')
);
Does AuthProvider a default export or named export?
For good practice, move the AuthProvider to the app component .
Index.js need to be codeless as you can.
More of context here : https://reactjs.org/docs/context.html
I am using ReactJS and i am facing an issue where as soon as i add react-boostrap CDN in the public/index.html react file or add this link import 'bootstrap/dist/css/bootstrap.min.css'; to index.js, Boostrap automatically disable the use of all the css i have built for the web application.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// REACT-BOOTSTRAP
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint...
reportWebVitals();
I tried to fix it in index.js or any page i want to use import 'bootstrap/dist/css/bootstrap.min.css' by importing that after import './index.css'; or any custom css but it does not seem to solve the conflict, is there a solution out there that i am not aware of?
I am following this: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
Which clearly says that the component won't work without the first import listed
import React from 'react';
import logo from './logo.svg';
import './App.css';
I just created my first tutorial app, opened App.js and it is not there. Yet I can npm start run it without any problems.
There are three import statements.
import React from 'react';
Stackoverflow already has a bunch of questions with answers about it (as an example: JSX can be used without importing React). Short answer: this import can be missed since React 17.
import logo from './logo.svg';
Here is an assignment of some value to the logo variable (by Webpack); therefore, the logo will be undefined if this import is missed. Apparently, your application can successfully start with an undefined logo.
import './App.css';
This import adds some styles to a component (by Webpack). So, your application has default browser styles without it.
That's why your application can be started without these import statements.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import "github-fork-ribbon-css/gh-fork-ribbon.css";
ReactDOM.render(<App />, document.getElementById("root"));
code is this. In last line. I know ReactDom.render means but I cannot figure out what <App /> means. especially "/>"
App refers to the file imported on line 3:
import App from "./App";
Open App.js on the same directory to look at the component. If you used the create-react-app, it is probably the root component of your application.
Pardon for this elementary issue.
I'm trying to figure out where to place removeHash() using the NPM react-scrollable-anchor. Link to the documentation is here.
Currently, the hash is removed only after I refresh the page. After the refresh, the location stays where the anchor is. What I would like to happen is that everytime I click an anchor link the URL removes the hash without the need to refresh.
I currently have removeHash() in my main index.js file as seen below.
I did try placing removeHash() at the bottom of my components right above the export statements but that didn't work.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { removeHash } from 'react-scrollable-anchor';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
removeHash();