use-shadow-dom v1.2.0

useShadow

Preview

online demo

Install

npm i use-shadow-dom

Import

import useShadow from 'use-shadow-dom'

Usage

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.

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:

const element = useShadow(<MyComponent count={count} />, [count])

When count changed, useShadow will return a new element.

Hook API

Options API