Inside React, it's all pretty straightforward - you import the component you wish to use and all the necessary styling and interactivity comes with it.
If you want to use a component outside of React, within a static HTML file or inside the content editor of a CMS for example, all you need is the HTML and as long as the CSS is present, everything works.
Our approach to this is to:
- Load a lightweight script on the page
- search the page for mention of a component that requires interactivity
- analyse the markup for data attributes
- turn those data attributes into properties for the React component
- mount a small React application in the place where the original markup was.
When you include the
<main> <h1>My brand new page</h1> <p>There are three things I think are really important when creating a design system.</p> <div data-tabs> <div data-tab-title="Important thing one">Tab One content</div> <div data-tab-title="Important thing two">Tab Two content</div> <div data-tab-title="Important thing three">Tab Three content</div> </div> </main>
In this instance the
app.js script will find the
div node with the data attribute of "data-tabs".
app.js script will then load a separate module that contains amongst others, three main parts:
- the React version of the component in question
- a small adapater that looks at the structure of the markup on the page and converts the data attributes it finds into properties to pass to the React component.
The main benefit of this approach is that we only have to author the component once, in React, and write a small adapter that will get the required bits of information from the markup to pass to the component.
Using interactive components in Orchard