Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

remount

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

remount

Mount React components to the DOM using custom elements


Version published
Weekly downloads
5.2K
increased by48.41%
Maintainers
1
Weekly downloads
 
Created

Remount

:electric_plug: 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).

Status

Install

yarn add remount

Usage

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

Given this React component:

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

Define it with:

import { define } from 'remount'

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

Use it:

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

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 'react-web-components'

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

Polyfills

We recommend using these two polyfills to support browsers down to IE9 (~1.7kb gzipped), 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.

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

 

FAQs

Package last updated on 17 Aug 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts