# use-shadow-dom

> A react hook for use shadow dom

Latest version **1.2.0** (published 2023-03-10) · 0 weekly downloads

## Install

```sh
npm install use-shadow-dom
pnpm add use-shadow-dom
yarn add use-shadow-dom
bun add use-shadow-dom
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-03-10 |
| First published | 2022-08-31 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 39.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mysteryven |
| Maintainers | mysteryzzz |
| Keywords | react, shadow dom, react hooks, custom hooks |

## Links

- npm: https://www.npmjs.com/package/use-shadow-dom
- Repository: https://github.com/mysteryven/react-use-shadow
- Homepage: https://github.com/mysteryven/react-use-shadow#readme
- Issues: https://github.com/mysteryven/react-use-shadow/issues
- npm.io page: https://npm.io/package/use-shadow-dom

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2023-03-10
- 1.1.4 — 2022-11-10
- 1.1.3 — 2022-11-10
- 1.1.2 — 2022-11-10
- 1.1.1 — 2022-08-31

## README

# useShadow 

[![npm version](https://badgen.net/npm/v/use-shadow-dom)](https://npm.im/use-shadow-dom) [![npm downloads](https://badgen.net/npm/dm/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(<MyComponent />)

  return (
    <div className="App">
      {element}
    </div>
  )
}

function MyComponent() {
  return <div>Hello world</div>
}
```

If you pass some props(eg. your custom css) to your component without do anything, the component will not rerender. 

```ts
const element = useShadow(<MyComponent count={count} />, [], {
  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(<MyComponent count={count} />, [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.

---
_Source: https://npm.io/package/use-shadow-dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._