Web-component to component user communication #150
-
I have created the web component using react-to-web-component library lets say how |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Hey. Great question. I am working on a guide and a library for exactly this! The library will make it easy to provide event listeners that tie into the component following familiar React-like patterns. You can use use a state management system like Redux to coordinate your whole application (guide on this also coming soon), but it sounds like that would be overkill for this project. In the meantime, the most straightforward way is to define a global function (attached to the window) and tell r2wc the name of that function. Then you can call it within your component as you would any other function prop. React Componentconst MyComponent: React.FC<{ onComplete: () => void }> = ({ onComplete }) => {
return <button onClick={onComplete}>Click me!</button>
}) R2WC DefinitioncustomElements.define(
"my-webcomponent",
r2wc(MyComponent, {
props: {
onComplete: "function"
},
}),
) Usagewindow.myFunction = () => {
console.log("Done!")
} <my-webcomponent on-complete="myFunction"></my-webcomponent> |
Beta Was this translation helpful? Give feedback.
Hey. Great question. I am working on a guide and a library for exactly this! The library will make it easy to provide event listeners that tie into the component following familiar React-like patterns.
You can use use a state management system like Redux to coordinate your whole application (guide on this also coming soon), but it sounds like that would be overkill for this project.
In the meantime, the most straightforward way is to define a global function (attached to the window) and tell r2wc the name of that function. Then you can call it within your component as you would any other function prop.
React Component