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
Related
i'm having an issue with kendotooltip component inside my angular application, it's working for desktop version but not for mobile version(although i added onshow="click" event and still not working).
there is many examples in stackblitz for kendotooltip that are not working when changing to mobile version .
i'm using the tooltip inside a child component that is called from other parent components .in fact if i test with a simple exemple it works, but if i add it inside my child component it does'nt work anymore(even if i add an empty div inside the parent component the tooltip dont work anymore).
I'm trying to replicate this example with NextJS.
The component gets rendered, but the content doesn't. Is SSR simply a limitation for this particular example?
Im trying to do SSR to my React + Next.js application. I have a proble with rendering dynamic modules. In _app.js I'm loading data and put them to my redux-saga. This is working fine but my SSR does not works for that data, because Im trying to render component with redux data instead of component props.
SSR only works, when I do api call inside getInitialProps, and put those requests via getInitialProps to my component. This is weird behaviour for me but let it be. It works by this but now I got another problem.
All those data that is responsible for my content are also listed in page view source. WTF - why there are in html content. Also because of that my page source view is loading few minutes.
Is there any option to not put those props into page source view ?
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!
I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent.
I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the
React component inside the shadow DOM of the webcomponent. But in that case, it seems that React is not able to catch UI events (click, keyPress, etc ...) anymore.
Let's take an example, let say that I have a first webcomponent <awesome-timer /> that render the React component inside the webcomponent node, and another webcomponent <less-awesome-timer /> that render the React component inside the shadow DOM of the webcomponent.
Both webcomponents use the same React component. However the one rendered inside the shadow DOM does not work, because click events on the button of the timer component does not trigger the bound function.
I guess React is not designed to handle such case, but I'd love to get more details about it.
The code of the example is available here : https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about it ?
I know this is kinda late but, I believe your issue when you pass any attributes to a web component they instantly become strings Because that's all you can pass to a web component. Now of course you can convert or cast them back to there original data type, except functions because once stringified they loose there scoping, lexical and all.
Now to your main question, you are were trying to pass you child element through the Main web components slot. Now you have to remember that once you pass anything to a web component you now have to use the webs components methods and return types to manage whatever you pass. So yes passing react into a web component will not work they you expect.
You will need to go back to whatever tool you use to build your web component and deal with the slot logic there. Since this is a very old post as are web components. You might not have had access to the modern web component build tool's we have today. I found Stenicl allows you to build and manage your web components in Typescript.
A good option is to change your pattern a little bit and just return web components from your react app.
Or you can use another really cool to call Lit-HTML or Lit-element. I believe they may have combined there core libraries. Anyway these tool will allow you to combine Reactjs and web components where lit-html gives you access to methods simial to Reactjs's life cycle methods. Anyway some good stuff to check out if your stuck at this point.