use-descendants

useDescendants

useDescendants is a react hook for keeping track of descendant components and their relative indeces. It's based off the @reach/descendants package, but faster and smaller.

If you want to understand more about what this package does or why we need it, read the Problem Complex from the @reach/descendants package.

In short, this package allows each item in a list to know it's 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:

<List>
  <Item /> {/* I'm index 0 */}
  <Item /> {/* I'm index 1 */}
  <div>
    <div>
      <Item /> {/* I'm arbitrarily nested, but still know that I'm index 2 */}
    </div>
  </div>
</List>

Installation

$ yarn add use-descendants

Usage

In the parent, you call useDescendants and pass the result to <Descendants> that wraps the children. In each child item, retrieve that items index with the useDescendant hook.

const Menu = () => {
  const context = useDescendants()
  return (
    <Descendants value={context}>
      <Item />
    </Descendants>
  )
}

const Item = () => {
  const index = useDescendant()
  return <div>My index is {index}</div>
}

You can pass any data you want to useDescendant and it will be available in the parent through the map ref:

// In Item
const ref = useRef()
const index = useDescendant({ ref })

// In Menu
const context = useDescendants()
console.log(context.map.current)
// => { '<randomItemId>': { index: 0, props: { ref: HTMLDivElement } } }

You can also pass un-memoized values or callbacks here because it's just kept in a ref:

const index = useDescendant({
  onSelect: () => {
    /* Do something */
  }
})

Credits

• @reach/descendants and Chance, who introduced me to this concept
• @shuding for help with a faster, simpler implementation