rewrap

Wrapping React components with custom elements.

React compatibility

| React Version | rewrap Version |
| ------------- |:-------------:|
| v19.x | 1.2 |
| v18.x | 1.x |
| v17.x | 0.x |

Installation

``yarn add @sonicgarden/rewrap`

`Usage`

`jsx import React from 'react' import { rewrap, asyncRewrap } from '@sonicgarden/rewrap'

const MyComponent = ({ content }) =>

{content}


const MyComponentWithChildren = ({ children }) => {children}

rewrap('my-component', MyComponent) rewrap('my-component-with-children', MyComponentWithChildren, true) asyncRewrap('async-component', async () => (await import('components/xxx')).default)`

You can then use this element in an HTML file:

`html

Hello, world!

Limitation

- Attribute changes
- Events trigger
- ShadowDOM