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!
Related
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).
VSCode has breadcrumbs which is very useful to navigate between tags in a long HTML file. But in a jsx file the breadcrumbs stop when it reaches the return statement, effectively making this feature non-existent in any rendering part of React.
Is there a setting, an extension or anything that solves this problem? I feel like this should've been a thing by now, with React being around for quite some time.
I did find one VSCode extension called React Outline, but the breadcrumbs doesn't update when I move my cursor around. It doesn't seem to have lots of features either.
React Breadcrumbs VsCode extension already does it nicely. It helps see the React component trees and jump to these components with either outline tab or Cmd+shift+. command.
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
I have a next.js app set up and written entirely in react, currently including the homepage, which is just a temporary placeholder using react components.
The real homepage was delivered to me in the form of a static site with an HTML file and several CSS+JS files. I can't just display the static HTML files right out of the public directory because I need the 'real' React navigation component to be displayed. I converted the HTML files to .js files, chopped off their static nav, and wrapped them in an export default so that I could import them into the appropriate route file in /pages, displaying them using return <div dangerouslySetInnerHTML={{ __html: homepage }} />; which allows my _app.tsx file to wrap it in all the usual stuff that applies the nav to the pages, context, providers, etc etc.
This seems to work great, however when I navigate away to one of my real pages and navigate back to the homepage it doesn't seem to re-run the javascript files the way a regular webpage would. Animations don't start, hero slider images are displayed one under the other, basically as if none of the JS is happening.
Am I approaching this from entirely the wrong angle, or is there just something I'm missing? I would prefer not to convert the HTML file I was given into React components at this time, so priority would be given to whatever solution keeps the original HTML file in its closest form so that the original programmers can update it without hassle. Why is none of my JS re-running?
I have created one search component using stencil and I'm integrating this stencil codebase with my react application via cdn link. I'm displaying the search component(which was created in stencil) as below in my react codebase :
<custom-search placeholder="Search"></custom-search>
The search component contains a search icon. I need to pass the text in search input field to my react code on click of this icon. How can this be achieved?
Unfortunately I haven't integrate Stencil JS component with React, but passing string data to web component should be working without too much hassle. Do you know if your React app can properly recognize your custom-search component? If not, then you might want to take a look at a link to Stencil JS official document of integrating Stencil JS component to React and make sure component get properly loaded and integrated.
If you know for sure you load the component then not sure why your placeholder is not set within your component - it is just a string after all. Maybe post the custom-search component code, as there might be issue with that (i.e. component lifecycle event you are using might not be doing what you expect to do)
Could you clarify the actual problem, please? :)
Does the component not get rendered, or are you unable to achieve communication from custom-search to the React app?
If the latter is the case, you might want to implement a Custom Event on the Stencil component, to communicate changes back to the consuming app.
As #tomokat mentioned, you should follow the official Stencil React integration docs. This is required, since React cannot handle Custom Events natively, and requires some help from the dev.
Edit: Sorry, I got confused by the first answer. Your title is quite clear, though. If you can show some example code of the component and the React integration, we could probably help in a better way.