/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/theme/examples/ShadowDOMProviderGlobalEvents.tsx
36 строк
1 KB
Урядышев Павел Александрович
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 { Input, ShadowDOMProvider } from '@v-uik/base' export const ShadowDOMProviderGlobalEvents = (): 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> <Input placeholder="Enter some text" label="Input" onKeyDown={(e) => { e.stopPropagation() }} /> </ShadowDOMProvider>, shadowRootContainer )} </div> ) }