https://github.com/mysteryven/use-shadow
A react hook for use Shadow DOM
https://github.com/mysteryven/use-shadow
react react-hooks shadow-dom
Last synced: 2 months ago
JSON representation
A react hook for use Shadow DOM
- Host: GitHub
- URL: https://github.com/mysteryven/use-shadow
- Owner: mysteryven
- Created: 2022-08-29T07:04:01.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-10T11:06:06.000Z (over 2 years ago)
- Last Synced: 2025-03-28T17:19:53.622Z (2 months ago)
- Topics: react, react-hooks, shadow-dom
- Language: TypeScript
- Homepage:
- Size: 62.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# useShadow
[](https://npm.im/use-shadow-dom) [](https://npm.im/use-shadow-dom)
## Preview
[online demo](https://stackblitz.com/edit/vitejs-vite-hvnnfc?file=src/App.tsx)
## Install
```bash
npm i use-shadow-dom
```
## Import
```ts
import useShadow from 'use-shadow-dom'
```
## Usage
```ts
function App() {
// this element will be rendered in shadow dom.
// and element will never rerender
const element = useShadow()
return (
{element}
)
}
function MyComponent() {
return
Hello world
}
```
If you pass some props(eg. your custom css) to your component without do anything, the component will not rerender.
```ts
const element = useShadow(, [], {
styleContent: '...' // element will not rerender even though count changed.
})
```
The component just like be memorized. you can tell `useShadow` your dependencies by pass `dependencyList` as second params:
```ts
const element = useShadow(, [count])
```
When `count` changed, `useShadow` will return a new element.
## Hook API
| Value | Type | Default | Description |
| -------- | --------| ----- | ----- |
| Component | ReactNode | - | The component you want to attach to shadow dom.
| deps | DependencyList | `[]` | The dependencies that control component updates.
| opts | Options | - | See Options API below.
## Options API
| Value | Type | Default | Description |
| -------- | --------| ----- | ----- |
| `shadowRootInit` | `ShadowRootInit` | `{ mode: 'open' }` | the params for `attachShadow`
| `styleContent` | `string` | Inline style string in shadow dom |
| `styleSheets` | `string[]` | Inline static css files in shadow dom, the base url is your root path.