remount

Remount

Use your React components anywhere in your
HTML as web components (custom elements).

Demo ⚡ Docs
1kb gzip'd  ·  No dependencies  ·  IE support

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

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:

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

More features

• JSON props (eg, <x-greeter props-json="{...}">) (docs)
• Named attributes (eg, <x-greeter name="John">) (docs)
• Shadow DOM (docs)

Browser support

Remount supports all modern browsers, including IE11 (Internet Explorer's oldest supported version as of 2016). Remember to use the polyfills below to ensure the best compatibility.

⚡ Browser support docs →

Polyfills

More info on this on the Polyfill 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
• 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