Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sil0rak/convert-react-to-web-component
Convert React component to web component without breaking a sweat.
https://github.com/sil0rak/convert-react-to-web-component
javascript legacy microfrontend react tpl twig webcomponent
Last synced: 3 days ago
JSON representation
Convert React component to web component without breaking a sweat.
- Host: GitHub
- URL: https://github.com/sil0rak/convert-react-to-web-component
- Owner: SIL0RAK
- Created: 2020-05-27T17:49:08.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T08:22:27.000Z (over 1 year ago)
- Last Synced: 2024-09-21T02:31:54.248Z (12 days ago)
- Topics: javascript, legacy, microfrontend, react, tpl, twig, webcomponent
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/convert-react-to-web-component
- Size: 946 KB
- Stars: 19
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
![npm](https://img.shields.io/npm/v/convert-react-to-web-component)
![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/SIL0RAK/convert-react-to-web-component)# React to Web Component
This library is meant to make maintaining legacy code less painful. Micro frontend will reduce your legacy core complexity enabling you to integrate React (application/widgets) in it.
**Warning**
This library is not tested with react 18.# Install
npm install convert-react-to-web-component
oryarn add convert-react-to-web-component
and don't forget to install peer dependencies:
* react
* react-dom# Usage
```javascript
import React from 'react';
import reactToWebComponent from 'convert-react-to-web-component';const ReactApp = () =>
Hello, world;reactToWebComponent(ReactApp);
```this snippet will create `` tag that can be used in plain html, angular template or twig.
## Attributes
To pass tag attributes to React component you have to specify them.
```javascript
import React from 'react';
import reactToWebComponent from 'convert-react-to-web-component';const ReactApp = ({ name, userLastName }) => (
Hello, {name} {userLastName}
);reactToWebComponent(ReactApp, { attributes: ['name', 'userLastName'] });
```Attributes should be passed as kebab-case to your element.
```html
```React component will rerender on attribute change.
## Tag name
By default created tag name will be given React component name converted to `kebab-case`. You can change name of tab by specifying your desired name.
```javascript
import React from 'react';
import reactToWebComponent from 'convert-react-to-web-component';const ReactApp = ({ name }) =>
Hello, {name};reactToWebComponent(ReactApp, { attributes: ['name']; name: 'app' });
```now you can call you component with `` tag.
## Attribute modifier (middleware)
In some cases, you may want to use middleware to modify value before it is passed to React component. This can be useful when implementing functionality in twig or angular apps.
```javascript
import React from 'react';
import reactToWebComponent from 'convert-react-to-web-component';const ReactApp = ({ name }) =>
Hello, {name};const middleware = (value) => (
value.includes('{') ? undefined : value
);reactToWebComponent(ReactApp, { attributes: ['name'], middleware });
```
## Shadow DOMTo prevent style interference between parent application and your react app you can pass `shadowDom` property which will create shadow root and mount react app to it.
```javascript
import React from 'react';
import reactToWebComponent from 'convert-react-to-web-component';const ReactApp = () =>
Hello, World;reactToWebComponent(ReactApp, { shadowDom: "open" });
```# Additional stuff
If you came this far and read all that stuff above you may be planning to use this lib. If this is the case you may want to see a demo. But let's be honest I know you are pro, and you will definitely check out `package.json` to see what is available.