https://github.com/beuterei/regis-tag-me
Defines react based custom elements and validates the attributes
https://github.com/beuterei/regis-tag-me
react web-component web-components
Last synced: about 1 year ago
JSON representation
Defines react based custom elements and validates the attributes
- Host: GitHub
- URL: https://github.com/beuterei/regis-tag-me
- Owner: Beuterei
- Created: 2025-03-11T00:13:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-12T11:18:15.000Z (about 1 year ago)
- Last Synced: 2025-04-12T12:33:48.604Z (about 1 year ago)
- Topics: react, web-component, web-components
- Language: TypeScript
- Homepage:
- Size: 109 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
regis-tag-me
Web Components with react
·
Report Bug
·
Request Feature
·
- [About The Project](#about-the-project)
- [Installation](#installation)
- [Usage](#usage)
- [registerWebComponent](#registerwebcomponent)
- [useWebComponentContext](#usewebcomponentcontext)
- [Interfaces](#interfaces)
- [registerWebComponent](#registerwebcomponent-1)
- [WebComponentContext](#webcomponentcontext)
## About The Project
Defines react based custom elements and validates the attributes.
### Installation
```bash
npm i @beuluis/regis-tag-me zod
```
## Usage
```tsx
import {
useWebComponentContext,
registerWebComponent,
} from "@beuluis/regis-tag-me";
import { z } from "zod";
const MyCustomElement = ({
firstName,
showGreeting = true,
}: {
firstName: string;
showGreeting: boolean;
}) => {
const { containerElement, element, hasShadowDom, stylesContainer } =
useWebComponentContext();
return (
Hello {firstName} from {element.tagName}. I am{" "}
{hasShadowDom ? "" : "not"} rendered in a shadow DOM.
);
};
registerWebComponent(
"my-custom-element",
MyCustomElement,
z.interface({
firstName: z.string().default("Guest"),
useShadow: z.stringbool({
falsy: ["false"],
truthy: [""], // empty string is truthy since its what we get when the attribute is just set without a value
}),
}),
{
shadowDOM: ({ useShadow }) => useShadow,
},
);
```
Use the custom tag in your HTML:
```html
```
### registerWebComponent
Registers a React component as a Web Component (Custom Element) using the given tag name. Takes [registerWebComponent](#registerwebcomponent) as arguments.
### useWebComponentContext
Provides a context for the web component. Returns [WebComponentContext](#webcomponentcontext).
## Interfaces
### registerWebComponent
- `tagName` - The name of the custom element
- `Component` - The React component to render inside the web component
- `attributeSchema` - [StandardSchemaV1](https://github.com/standard-schema/standard-schema) defining the attributes/props for the component
- `options` - Additional configuration options
- `mixin` - Optional mixin to extend the web component's functionality. Runs after this library's logic
- `shadowDOM` - Controls whether to use Shadow DOM
- If boolean: directly determines Shadow DOM usage
- If function: dynamically determines Shadow DOM usage based on attributes. This only takes effect on the first render
### WebComponentContext
- `containerElement` - The element to mount the web component in
- `element` - The web component element
- `hasShadowDom` - Whether the web component uses Shadow DOM
- `stylesContainer` - The element to mount custom styles in
[contributors-shield]: https://img.shields.io/github/contributors/Beuterei/regis-tag-me.svg?style=flat-square
[contributors-url]: https://github.com/Beuterei/regis-tag-me/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/Beuterei/regis-tag-me.svg?style=flat-square
[forks-url]: https://github.com/Beuterei/regis-tag-me/network/members
[stars-shield]: https://img.shields.io/github/stars/Beuterei/regis-tag-me.svg?style=flat-square
[stars-url]: https://github.com/Beuterei/regis-tag-me/stargazers
[issues-shield]: https://img.shields.io/github/issues/Beuterei/regis-tag-me.svg?style=flat-square
[issues-url]: https://github.com/Beuterei/regis-tag-me/issues
[license-shield]: https://img.shields.io/github/license/Beuterei/regis-tag-me.svg?style=flat-square