Remount

使用自定义元素将 React 组件挂到 DOM 上。「Mount React components to the DOM using custom elements」

Github stars Tracking Chart

Installation

Remount is available through the npm package repository.

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

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)
  • Uses Custom Elements API (when available)
  • Fallback to compatible API for other browers
  • Shadow DOM mode (when available)

Browser support

Remount supports all browsers that React support, which includes IE11. Legacy IE support (IE9) is available using polyfills.

Custom Elements API# ("Web Components") will be used if it's available (Chrome/67+), and will fallback to a compatible API otherwise.

Browser support 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

 

Overview

Name With Ownerrstacruz/remount
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 2)
Platform
License:MIT License
Release Count21
Last Release Namev1.0.0 (Posted on 2022-09-30 20:50:26)
First Release Namev0.1.0 (Posted on 2018-08-17 17:45:24)
Created At2018-08-16 10:57:39
Pushed At2023-03-08 07:41:22
Last Commit At2022-09-30 20:50:26
Stargazers Count675
Watchers Count9
Fork Count30
Commits Count291
Has Issues Enabled
Issues Count13
Issue Open Count8
Pull Requests Count20
Pull Requests Open Count3
Pull Requests Close Count57
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top