In my react application, in a component, I need to load a separate css file dynamically based on a condition and the css styles should get applied.
The condition here is in the url if I have a query string say "customStyleName" with some value , then this dynamic css file should get loaded. I am using css modules and loading a sass file for this component. But, when this query string "customStyleName" present in the url, this dynamic css file should be loaded and the styles would be overrides
I could manage to check the condition if customStyleName query string present in the url and load the css file using require() (dynamic imports didn't work here) and the styles get applied in my local. It's working fine in my local.
localhost:3000/ss/ext/onboarding?customStyleName='ss'
useEffect(() => {
const query = new URLSearchParams(window.location.search);
const customStyleName = query.get("customStyleName");
if (customStyleName) {
console.log("apply customStyleName");
require("./customStyles.css");
} else {
console.log("customStyleName empty");
return;
}
}, []);
But, in dev or other environments, it is loading the dynamic css file even though the necessary query string not present in the url. My react application is created using create-react-app.
when I checked in the developer tools, the css file is getting loaded in dev environments. I am confused why the same thing working perfectly in my local and its not in other environments. Any help would be appreciated. Thanks!
Related
I want to dynamically render FontAwesome icons within a NextJs project where a page is being rendered using SSR. I don't know which icons will be rendered until runtime, so I am wanting to render the icons by referring to them by using a string: I cannot import just them individually by name at build time.
// within my component
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
export function MyComponent({icon}) {
return (
...
<FontAwesomeIcon icon={icon}/>
...
);
}
In my page, I am trying this:
import { fas } from '#fortawesome/free-solid-svg-icons'
library.add(fas);
.. within my page JSX:
MyComponent<icon={'fa-solid fa-cube'}/>
When I run NextJs in development mode, I see in the server logs errors that look like:
Could not find icon { prefix: 'fas', iconName: 'cube' }
and I also get a browser error "Hydration failed because the initial UI does not match what was rendered on the server."
However, when I run a production build and serve that, the page renders ok.
How do I import all of the FontAwesome icons in NextJs and serve them dynamically using SSR?
There is an open issue discussing precisely this problem.
A temporary workaround is to require() the library instance instead of importing it (reference).
I've recently started a firebase project using express where I generate html using the following code and return it to the user which is working:
response.render("index", { Element: responseValue.data().Url, Contents: responseValue.data().Contents});
I am trying to add styling and JS in the public folder since they will be static and don't change but the issue is my .hbs file can't access the JS in the public folder no matter what file path I use. How do I fix this?
I want to load RTL or LTR styles based on the user's locale.
I have tried to import('/path/to/RTL-style.css') but it doesn't working - the styles are not getting applied.
They will be applied only if I mention this line in the top of the file, before any code execution, in this format:
import '/path/to/RTL-style.css' and without parentesis ()
I am using Parcel bundler and babel polyfill included as the first dependency.
How to achieve what I try to do?
I found it, just do this when its css file:
import('/colors.css').then().catch(() => {})
And if its js file you can do this:
const module = await import('/path/to/jsfile')
I am working on an epub project using electron with react, and using epub to parse the epub file. Through this parser, I am able to fetch the css, ttf those files. However, these files won't be available in a regular way. For example, for current section's html might want to import css like <link href="flow0003.css" rel="stylesheet" type="text/css">, and this css file won't be loaded.
To work around this, is it possible to store some files to react's public folder dynamically?
I had been searching online, and it seems impossible to do so due to security reason. I had also searched for similar approach with electron, and it seems there no advices available since this project is using electron with react.
By the way, I am able to dynamically inject style like this:
Book.tsx
useEffect(() => {
const css = Object.values(book.manifest).filter(({ href }) => href.endsWith('.css'));
Promise.all(css.map(c => getCss(book, c.id)))
.then(arr => arr.join('\n'))
.then(styles => {
if (!ref.current) return;
ref.current.setAttribute('style', styles);
});
}, [book]);
However, the nested improt for font file won't work anyway.
So is it possible for electron with react, to store style sheets, font files to its public folder (and need to be deleted later as well)?
I know that it's possible to parse img, style's data with html. For example, use react's dom.setAttribute to dynamically inject style sheet. Similarly, for img tag, image's data can be directly injected like <img src={data:${mimeType};base64, ${imgData.toString('base64')}}>. So is there any equivalent way for to load font-face?
Use electron's ipcMain and ipcRenderer to communicate, and electron has assets to file system.
I have a scenario where I will be getting the background image URL through a CDN whose base path is set in the environment file. Since I can access the environment variable only in the .js file and not in .scss, defining the style in .scss isn't possible. I could use inline styles, but I would like to show/hide the background image based on device size through media query. But I cannot get that in .js.
So, is there any solution?
You can have several CSS files that you require in React depending on the environment variable. An example could be:
if (process.env.NODE_ENV === 'development') {
require('./dev_only_styles.css');
}