Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 6 days ago
JSON representation
Mount React components to the DOM using custom elements
- Host: GitHub
- URL: https://github.com/rstacruz/remount
- Owner: rstacruz
- License: mit
- Created: 2018-08-16T10:57:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-08T07:41:22.000Z (almost 2 years ago)
- Last Synced: 2024-12-06T17:49:05.011Z (7 days ago)
- Topics: custom-elements, onmount, react, shadow-dom, web-components
- Language: JavaScript
- Homepage:
- Size: 1.87 MB
- Stars: 717
- Watchers: 9
- Forks: 25
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - remount - Mount React components to the DOM using custom elements (JavaScript)
- awesome-list - remount
- awesome-web-components - remount - Mount React components to the DOM using custom elements. (Libraries / Integrations)
README
Remount
Use your React components anywhere in your
HTML as web components (custom elements).
Demo ⚡ Docs
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://github.com/rstacruz)
[](https://twitter.com/rstacruz)