New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

remount

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

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

0.7.0
Source
npm
Version published
Weekly downloads
7.9K
-20.67%
Maintainers
1
Weekly downloads
 
Created
Source


Remount

Travis CI

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

DemoDocs
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

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


 

Keywords

custom element

FAQs

Package last updated on 19 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