Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rstacruz/remount

Mount React components to the DOM using custom elements
https://github.com/rstacruz/remount

custom-elements onmount react shadow-dom web-components

Last synced: 26 days ago
JSON representation

Mount React components to the DOM using custom elements

Awesome Lists containing this project

README

        



Remount


version
 
Bundle size

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


DemoDocs


2kb gzip'd  ·  No dependencies  ·  IE support



## Installation

Remount is available through the npm package repository. React 18 is required.

```sh
# npm
npm install remount react react-dom
# yarn
yarn add remount react react-dom
```

- Via yarn: `yarn add remount`
- or npm: `npm install remount`

## Usage

Let's start with any React component. Here's one:

```js
const Greeter = ({ name }) => {
return

Hello, {name}!

}
```

Use _define()_ to define custom elements. Let's define a `` element:

```js
import { define } from 'remount'

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

You can now use it anywhere in your HTML! :boom:

```html

```

⚡ **[API documentation →](docs/api.md)**

## 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, ``) ([docs](./docs/api.md))
- Named attributes (eg, ``) ([docs](./docs/api.md))
- 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 18 supports.

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

⚡ [Browser support docs →](./docs/browser_support.md)

[custom-elements]: https://caniuse.com/#search=custom%20elements

## Documentation

- [API documentation](./docs/api.md)
- [Builds](./docs/builds.md) — ES2015+ and ES Module builds are also provided.
- [FAQ and Troubleshooting](./docs/faq.md) — Start here if you find any issues.
- [Comparison with alternatives](./docs/comparison.md)
- [Browser support](./docs/browser_support.md)

## Thanks

**remount** © 2022, Rico Sta. Cruz. Released under the [MIT] License.

Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]).

> [ricostacruz.com](http://ricostacruz.com)  · 
> GitHub [@rstacruz](https://github.com/rstacruz)  · 
> Twitter [@rstacruz](https://twitter.com/rstacruz)

[mit]: http://mit-license.org/
[contributors]: http://github.com/rstacruz/remount/contributors


[![](https://img.shields.io/github/followers/rstacruz.svg?style=social&label=@rstacruz)](https://github.com/rstacruz)  
[![](https://img.shields.io/twitter/follow/rstacruz.svg?style=social&label=@rstacruz)](https://twitter.com/rstacruz)