In this repository, bidirectional integration between Datastar and third-party React libraries is explored; namely, Floating serves as an example of such a library.
- Node.js installed
npm install && make develop-componentsand then navigate to http://localhost:5173/.
We proceed by wrapping each React component (see here) in a Web component (see here). Then, achieving bidirectional data and control flow between React and Datastar is quite straightforward.
Note that the function for converting React components to web components is generic; one can use it to convert any React component to a web component when integrating with Datastar. The function's usability when integrating with other frameworks is yet to be determined; there, the much more complex alternative, @r2wc/react-to-web-component, might be a better choice.
The data flow from Datastar to React is achieved by (re-)rendering the React component each time a prop changes; each prop, in turn, is bound to a Datastar signal through data-attr.
The data flow from React to Datastar is achieved by triggering custom events on the web component; these, in turn, trigger updates to Datastar signals. More precisely, for each custom event to be triggered, a constructor is specified when defining the web component; then, the constructor is wrapped in an event dispatcher and passed to the React component through a prop.
In line with the React philosophy, we only consider controlling a component through its props - see above.
The control flow from React to Datastar can be achieved by triggering custom events on the web component - see above.