Awesome
<br> <p align='center'><a href='https://github.com/rstacruz/remount'><img src='docs/images/remount.png' width='450'></a></p> <br> <h1 align='center'>Remount</h1> <p align='center'> <a href='https://npmjs.com/package/remount'><img src='https://img.shields.io/npm/v/remount.svg?colorA=234&colorB=83e' alt='version'></a> <a href='https://bundlephobia.com/result?p=remount'><img src='https://img.shields.io/bundlephobia/minzip/remount.svg?colorA=345&colorB=89a&label=size' alt='Bundle size'></a> </p> <p align='center'>Use your React components anywhere in your <br> HTML as web components (custom elements).</p> <p align='center'> <a href='https://codepen.io/rstacruz/pen/EpBZRv?editors=1010'>Demo</a> ⚡ <a href='https://github.com/rstacruz/remount#remount'>Docs</a> <br> <em>2kb gzip'd · No dependencies · IE support</em> </p> <br> <br>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! :boom:
<x-greeter props-json='{"name":"John"}'></x-greeter>
Use cases
Some ideas on why you might want to consider Remount for your project:
| <br><img src='./docs/images/non-spa.png' width='400'><br><br> | ✨ Adding React to non-SPA apps <br> You can use React components on any page of a "regular" HTML site. Great for adding React to apps built on Rails or Phoenix. |
| <br><img src='./docs/images/interop.png' width='400'><br><br> | 💞 Interop with other frameworks <br> Remount lets you use your React components just like any other HTML element. This means you can use React with Vue, Angular, or any other DOM library/framework. |
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<sup>#</sup> ("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.<br> Authored and maintained by Rico Sta. Cruz with help from contributors (list).
<br>ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz
<br>