import { createDescendantContext } from '@chakra-ui/descendant'; import * as React from 'react'; const [ DescendantsProvider, useDescendantsContext, useDescendants, useDescendant, ] = createDescendantContext(); const NumberContext = React.createContext< | { selected: number; setSelected: React.Dispatch>; } | undefined >(undefined); function Example({ children }) { const descendants = useDescendants(); const [selected, setSelected] = React.useState(1); const context = React.useMemo(() => ({ selected, setSelected }), [selected]); return (

{children}

); } function DummyItem({ children }) { const { selected, setSelected } = React.useContext(NumberContext); const descendants = useDescendantsContext(); const [index, setIndex] = React.useState(-1); const ref = React.useRef(null); React.useEffect(() => { return () => { if (ref.current) { descendants.unregister(ref.current); } }; }, []); React.useEffect(() => { if (!ref.current) { return; } const dataIndex = Number(ref.current.dataset['index']); if (index != dataIndex && !Number.isNaN(dataIndex)) { setIndex(dataIndex); } }); return ( ); } export default function App() { return (

A - 1 (depth 1) A - 2 (depth 2) A - 3 (depth 3) A - 4 (depth 2) A - 5 (depth 2) B (depth 1) C (depth 1)C (depth 2) D (depth 1)

); }