<a href='https://github.com/rstacruz/remount'><img src='docs/images/remount.png' width='450'></a> <h1 align='center'>Remount</h1> <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> Use your React components anywhere in your HTML as web components (custom elements). <a href='https://codepen.io/rstacruz/pen/EpBZRv?editors=1010'>Demo</a> ⚡ <a href='https://github.com/rstacruz/remount#remount'>Docs</a> 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! :boom:

<x-greeter props-json='{"name":"John"}'></x-greeter>

⚡ API documentation →

Use cases

Some ideas on why you might want to consider Remount for your project:

| | | | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | <img src='./docs/images/non-spa.png' width='400'> | ✨ Adding React to non-SPA apps You can use React components on any page of a "regular" HTML site. Great for adding React to apps built on Rails or Phoenix. | | | | | <img src='./docs/images/interop.png' width='400'> | 💞 Interop with other frameworks 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# ("Web Components") will be used if it's available (Chrome/67+), and will fallback to a compatible API otherwise.

⚡ Browser support docs →

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

ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz

Remount

Install / Use

README