Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcisbee/better-react-web-component
Wrapper for React Component to CustomElement
https://github.com/marcisbee/better-react-web-component
Last synced: 3 months ago
JSON representation
Wrapper for React Component to CustomElement
- Host: GitHub
- URL: https://github.com/marcisbee/better-react-web-component
- Owner: Marcisbee
- License: mit
- Created: 2023-08-09T07:58:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-12T08:04:26.000Z (7 months ago)
- Last Synced: 2024-10-15T17:34:57.443Z (3 months ago)
- Language: TypeScript
- Size: 93.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Better React Web Component
Wrapper for React (v18.x) Component to CustomElement that magically just works and is type safe with Typescript!
- __Small__. About 1kB (minified and gzipped). Zero dependencies.
- __Simple__. Each component interface is defined with strict types.
- Good __TypeScript__ support.
```tsx
import { createCustomElement, InferProps, optional } from 'better-react-web-component'
// Define custom component interface
HelloComponent.types = {
name: optional.string,
}
// Infer typescript types
type ComponentProps = InferProps
// Defined component
function HelloComponent({ name = "unknown" }: ComponentProps) {
return (
Hello {name}!
)
}
// Create and register custom component
customElements.define(
"hello-component",
createCustomElement(HelloComponent, "shadowRoot"),
)
```
Usage in html:
```html
```
[Open this demo in dune.land](https://dune.land/dune/08fcf962-8633-4ba4-b10f-fe3686573115)
# Install
```sh
npm install better-react-web-component
```
# Guide
## Define attributes
Attributes are defined on component `types` object.
> **Note**
> Attribute names defined here are case-insensitive as they are in HTML spec!
> Hence the below can be used as `` or ``.
```ts
MyReactComponent.types = {
name: optional.string,
requiredName: required.string,
}
```
### Supported prop types:
- String:
- `optional.string`
- `required.string`
- Number:
- `optional.number`
- `required.number`
- Boolean:
- `optional.boolean`
- `required.boolean`
- Json (parses attribute with JSON.parse):
- `optional.json`
- `required.json`
- Function:
- `optional.event`
- `required.event`
## Define default values
Default values are defined on react component itself.
```ts
function MyReactComponent({
requiredName,
name = "unknown",
}: InferProps) {
...
}
```
## Handle json/object values
In webcomponent space there is no object type to be passed as value. Instead we can pass json object as string and then parse it in react component. For this we can use `optional.json` or `required.json` (it does parsing automatically so component will receive object not string).
And for Typescript to have proper types we can use `InferProps` feature to replace/update properties like json values.
```ts
MyReactComponent.types = {
custom: required.json,
}
type Props = InferProps
```
Then in component this object can be passed as string
```html
```
## Handle events
This package also supports custom events to be defined.
> **Note**
> Event names defined here are __CASE-SENSITIVE__ so we lowercase them and remove leading `"on"` to match other event names!
```tsx
import { createCustomElement, InferProps, optional } from 'better-react-web-component'
import { useState } from 'react'
InputName.types = {
name: optional.string,
onNameChange: optional.event, // Event name must start with "on" and will be lowercase in html land
}
function InputName({
name = 'unknown',
onNameChange,
}: InferProps) {
const [localName, setLocalName] = useState(name)
return (
{
setLocalName(e.target.value)
onNameChange?.({ detail: e.target.value }) // Trigger custom event here if it's defined
}}
/>
)
}
customElements.define('input-name', createCustomElement(InputName))
```
At the same time in html land:
```html
const inputNameEl = document.querySelector('input-name');
// Note that event name is ALWAYS lowercase without `on` in front of it
inputNameEl.addEventListener('namechange', (e) => {
console.log(e.detail);
});
```
[Open this demo in dune.land](https://dune.land/dune/ad3ae58f-876e-4f25-9ee2-c1262cd68d3e)