rstacruz/remount — Gitpedia

<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.

sh
# 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:

js
const Greeter = ({ name }) => {
  return <div>Hello, {name}!</div>
}

Use define() to define custom elements. Let's define a <x-greeter> element:

js
import { define } from 'remount'

define({ 'x-greeter': Greeter })

You can now use it anywhere in your HTML! :boom:

html
<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:


<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.