I'm using the react-to-print library but asking more generally - if I have a sidebar React component that I want to be printed on every page, is this possible? Kind of like a header/footer but a React component instead, that doesn't necessarily appear on the top or bottom of the page
Related
I'm working with a Chrome extension and embedding UI component on a user's site.
I wrote React component with Typescript (.tsx files)
The thing is, when I'm trying to embed the react component inside the site, the component just wont function - drop-downs wont open, buttons click wont do anything, components wont re-render on state change, etc... sometimes the components even lose all of it styles, like the css doesn't exist.
The only thing I could notice is that I'm embedding the components inside an iframe, idk if it has something to do with that or not - but if i put them outside the iframe - all works perfectly.
Im using render function to render the component on the site:
const element = ReactDOM.createRoot(#selector to create root#);
element.render(<MyComponent prop1="prop1" prop2="prop2"></MyComponent>);
Anyone had any experience with the type of issue?
Thanks!
As I mentioned - I already tried to embed the component outside an iframe and it worked
So I want to load a page that is content driven from CMS (I cannot use WebView)
Page rendering is taking time so want to only render visible things on screen first (even if we get all the data from CMS).
And then render the remainder of the page in the background once the visible content is rendered.
I cannot use React Suspense because React native with Hermes engine doesn't support.
Came across this old post - Is there some finished rendering event in react native? where there was no solution to detect rendered event on components.
Cannot use FlatList because each section in the page content is different.
Cannot use state updation as a sign that the component has rendered because the component is heavy and takes time to render after state updation.
I am sorry if the title of my question does not make sense or the whole question :)
How to achieve this behaviour in npmjs.com when navigating in React's different components? go to npmjs.com, search for react, click on next page, the current page does not unmount, instead they show a progress bar and wait for the next page to get ready and then show it.
Is it possible to implement this in navigating between different components using react-router-dom?
Thanks
I am using a lot of components combine together to make a UI of the website. As a newbie, I am not sure how can I change the css/style of the component when a new component renders. For example a component lets say SearchBar is on the component as the image below.
The SearchBar css makes it at the center of the page.
But when I click on the search button and the next component renders I want to change the css and take it to the top. Is this even doable?
While i can understand you can build React components like button, list ...
some ppl suggests to create page component as well.
This confuses me, since to me page is on top of these UI components (button, list, ...), it uses these components.
So what's the advantage to make page itself as an component ?