Register child nodes of a react element for better accessibility
npm install @chakra-ui/descendantKeep track of descendant components and their relative indices.
A descendant index solution for better accessibility support in compound
components.
> Note 🚨: This package is primarily intended for internal use by the Chakra
> UI library. You should not use it directly in your production projects.
``sh
yarn add @chakra-ui/descendant
npm i @chakra-ui/descendant
`
Descendants observer is a utility hook for keeping track of descendant elements
and their relative indices.
In short, this package allows each item in a list to know its relative index and
the parent of the list can keep track of each child, without needing to render
in a loop and pass each component an index.
This enables component composition:
`jsx`
`jsx
import { createDescendantContext } from "@chakra-ui/descendant"
import * as React from "react"
const [
DescendantsProvider,
useDescendantsContext,
useDescendants,
useDescendant,
] = createDescendantContext()
const MenuContext = React.createContext({})
function Menu({ children }) {
// 1. Call the useDescendants hook
const descendants = useDescendants()
const [selected, setSelected] = React.useState(1)
const context = React.useMemo(() => ({ selected, setSelected }), [selected])
return (
// 2. Add the descendants context
const prev = descendants.prev(selected)
prev.node.focus()
setSelected(prev.index)
}}
>
Prev
const next = descendants.next(selected)
next.node.focus()
setSelected(next.index)
}}
>
Next
{children}
)
}
const MenuItem = ({ children }) => {
const { selected, setSelected } = React.useContext(MenuContext)
// 3. Read from descendant context
const { index, register } = useDescendant()
const isSelected = index === selected
return (
ref={register}
aria-selected={isSelected}
onMouseMove={() => setSelected(index)}
style={{ color: isSelected ? "red" : "black" }}
>
{children} - {index}
const Example = () => {
const [show, setShow] = React.useState(false)
const [show2, setShow2] = React.useState(false)
const toggle = () => {
setShow(!show)
if (!show === true) {
setTimeout(() => {
setShow2(true)
}, 1000)
}
}
return (