Vite React template has a file called index.html at the root of the project.
The way I understood, this file is static.
I want to change the title of each page based individually.
I know I can use useEffect in each page and set the title using simple vanilla JS.
But I wonder if there is a better more standard react-y way to do that?
You can use react-helmet package, it enables you to add head tag in any component that you want
Using useEffect seems pretty reasonable. You can encapsulate it into your own useTitle hook for more clarity (see for instance https://www.30secondsofcode.org/react/s/use-title).
Related
How can i create Header project in react and want to share the same to other projects without npm?
Is there any way I can share script and selector like <Header></Header> and they can use the same?
I have tried so many things but cann't able to share with other projects.
Maybe you are talking about reusing Header component in some other project. I suggest you to take a look at Storybook . You can simply add that same component inside the new application and then use it there.
I'm trying to hack a solution to an iframe that gets added dynamically to my page in order to change its CSS. I have the iframe's id. Is there a way of doing this with React?
Edit: I'm using React. I don't have access to the source code of the iframe (an embedded checkout as part of an online shop) so can only make changes to its CSS once it's been dynamically added to the page.
I think you can use React refs
https://reactjs.org/docs/refs-and-the-dom.html
I'm working on a prototype for a web app and I chose NextJS because I wanted to learn it better, but I realize I'm not using it in the "standard" way. I started from the Next + Material-UI example here: https://github.com/mui-org/material-ui/tree/master/examples/nextjs and all was good.
But now, I'm trying to persist data using sessionStorage, and I'm finding it difficult to make this work without being able to use the componentDidMount lifecycle event at the page-level. Next's documentation says that projects with a custom _document.js file won't have the componentDidMount method client-side. My project uses a custom document file due to Material-UI. It seems like it's there to support server-side rendering of css-in-js frameworks.
If I don't need server-side rendering, is there a way I can keep Material-UI working, but do away with the custom _document.js file so I can use componentDidMount?
You should be fine using both sessionStorage and a custom document.
componentDidMount (and any other lifecycle method) is not working only for _document.js as this is not rendered client side.
sessionStorage is part of the window so you will be fine using it on any other page/component using the componentDidMount lifecycle.
I have set up a simple react project that has a reusable component called 'cover'. Within the 'cover' component, I have an animated SVG I created from Adobe Animate and have it exported into HTML, JS and SVG. This works fine on first load as the JS is in the public/index.html file and initialised in the tag. However, when I change routes, the init isn't retriggered (which is correct since React isn't meant to reload the page), so now I have the dilemma of not being able to see the SVG upon route changes.
See example here: https://react-sfj7qx.stackblitz.io
Editor version: https://stackblitz.com/edit/react-sfj7qx
Note that the init() function on the tag doesn't seem to render within Stackblitz...
Since I don't know Adobe Animation too much, I edited your stackblitz, I break your code a little bit, but you have all it needs to succeed in this code. What you was not aware of, is that you need to import and export function and variable between files in react. So you'll see how I've done it in the stackblitz example.
Good luck!
Some used them together?
Maybe there is a component for the PruneCluster?
It will be great to see some examples/tutorials....
Download the prunecluster from npm.
Copy it to your local js directory.
add the line
exports.PruneCluster = PruneCluster;
Then start using it :
var P = require('../Lib/PruneCluster');
this.clusterGroup = new P.PruneClusterForLeaflet();
The author don't have plans to make it React compatible. https://github.com/SINTEF-9012/PruneCluster/issues/102
EDIT:
PruneCluster should use as it is in the official documentation.
The problem is, leaflet is mounted as react component.
The better answer is to expose leaflet map object from the react component.
This way you can use prunecluster as it is.
The example above is bad, see this Example which shows how to access leaflet map, which is half the solution.
From there, just use Prunecluster as normal JS and create layers that you then add to leaflet map object that you got from my example.
I would suggest trying this React component
https://yuzhva.github.io/react-leaflet-markercluster
Those React component have similar functionality with PruneCluster.