Remount
Use your React components anywhere in your
HTML as web components (custom elements).
Demo β‘ Docs
2kb gzip'd Β Β·Β No dependencies Β Β·Β IE support
Installation
Remount is available through the npm package repository. React 18 is required.
# npm
npm install remount react react-dom
# yarn
yarn add remount react react-dom
- Via yarn:
yarn add remount
- or npm:
npm install remount
Usage
Let's start with any React component. Here's one:
const Greeter = ({ name }) => {
return <div>Hello, {name}!</div>
}
Use define() to define custom elements. Let's define a <x-greeter>
element:
import { define } from 'remount'
define({ 'x-greeter': Greeter })
You can now use it anywhere in your HTML! π₯
<x-greeter props-json='{"name":"John"}'></x-greeter>
Use cases
Some ideas on why you might want to consider Remount for your project:
More features
- JSON props (eg,
<x-greeter props-json="{...}">
) (docs) - Named attributes (eg,
<x-greeter name="John">
) (docs) - Uses Custom Elements API (when available)
- Fallback to compatible API for other browers
- Shadow DOM mode (when available)
Browser support
Remount supports all browsers that React 18 supports.
Custom Elements API# ("Web Components") will be used if it's available (Chrome/67+), and will fallback to a compatible API otherwise.
Documentation
- API documentation
- Builds β ES2015+ and ES Module builds are also provided.
- FAQ and Troubleshooting β Start here if you find any issues.
- Comparison with alternatives
- Browser support
Thanks
remount Β© 2022, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).
ricostacruz.com Β Β·Β GitHub @rstacruz Β Β·Β Twitter @rstacruz