remount

⚡ Demo ⚡
1kb gzip'd  ·  No dependencies  ·  IE9 support

Remount

🔌 Mount React components to the DOM using custom elements

Experimental - Remount lets you use your React components anywhere in the page as a web component (custom element).

Installation

Remount is available through the npm package repository.

• Via yarn: yarn add remount
• or npm: npm install remount

Be sure to use the recommended polyfills below as well!

Usage

Given any React component, such as this:

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

You can use define() to define custom elements. Let's define <x-greeter> like so:

import { define } from 'remount'

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

You can then use it in your HTML, or even in your other React components!

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

➡️ More at API documentation

Use cases

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

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

Custom properties

<x-greeter name="John"></x-greeter>

Only the props-json attribute is supported by default. To support custom properties like above, pass the names of attributes you want Remount to use.

import { define } from 'remount'

define({
  'x-greeter': {
    component: Greeter,
    attributes: ['name']
  }
})

Limitations

Remount relies on the Custom Elements HTML API, so all limitations of the Custom Elements API apply. Keep these in mind:

• Custom components names require a hyphen, and are case insensitive.
• Attributes are case insensitive.

Browser support

Remount supports all browsers supported by React. Use the polyfills below to ensure the best compatibility.

Polyfills

We recommend these two polyfills provided by the @webcomponents/webcomponentsjs package. Load it via JavaScript in your app's entry point:

// Add the package via: yarn add @webcomponents/webcomponentsjs
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
import '@webcomponents/webcomponentsjs/webcomponents-loader.js'

Or you can load it via CDN:

<script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/custom-elements-es5-adapter.js'></script>
<script crossorigin src='https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/webcomponents-loader.js'></script>

More info at the Polyfills documentation.

More info

• Builds — ES2015+ and ES Module builds are also provided.
• API documentation
• Frequently-asked questions
• Comparison with alternatives
• Polyfills

Thanks

remount © 2018, 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