/
gsam
/
ui-kit-ce
Обзор
Документация
Войти
/
gsam
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/theme/examples/ShadowDOMProviderBase.tsx
30 строк
968 B
Урядышев Павел Александрович
feat(theme): реализован новый провайдер для работы с Shadow DOM
01 сен 2025, 17:05
01 сен 2025, 17:05
aa1c3a8
Код
Авторство
О чём код?
import * as ReactDOM from 'react-dom' import * as React from 'react' import { Button, ShadowDOMProvider } from '@v-uik/base' export const ShadowDOMProviderBase = (): React.ReactElement => { const shadowRootRef = React.useRef<HTMLDivElement | null>(null) const [shadowRootContainer, setShadowRootContainer] = React.useState<HTMLDivElement | null>(null) React.useEffect(() => { if (shadowRootRef.current && !shadowRootContainer) { const shadowRoot = shadowRootRef.current.attachShadow({ mode: 'open' }) const container = document.createElement('div') shadowRoot.appendChild(container) setShadowRootContainer(container) } }, [shadowRootContainer]) return ( <div ref={shadowRootRef}> {shadowRootContainer && ReactDOM.createPortal( <ShadowDOMProvider> <Button>Button Inside Shadow DOM</Button> </ShadowDOMProvider>, shadowRootContainer )} </div> ) }