{"dist":{"shasum":"a79f424c98bb5e11d0ca04bff5d86341fd752d40","tarball":"https://registry.npmjs.org/use-descendants/-/use-descendants-1.0.0-beta.7.tgz","fileCount":8,"integrity":"sha512-R1vODZbZsKnUOfODKYKxNW/5keD1FU3jvEi77dyauNnB2qm6QfqK2K4MISFUqvVYLb03eRg9V3Rqr281aaNFOw==","signatures":[{"sig":"MEUCIQDfRAWV3zAvaTuZQkYL3WO3mh3F8C5WKJU6jqhvKHckzwIgLquSjGhtQDEcnXHbFaevqW3jrv16c0WdgljK+EVOf6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE/VjCRA9TVsSAnZWagAAnIsQAJNikE+BzsL7e4gD2Cj7\niEi3CXzi6ikHRdJGhZDqnmVXNzQJ9UhEpINihHutOqRxbLAbYKkyLVQyot4t\n7Os7MKSbBfrzJhzezfS1rSU4dhRtdFvuBmkJJHm/+OPpch196VxsS1ZmmH+W\nHnfR4JPz1kJ6ieAF6YT3hrwGZHJXKbB3IHI9tpUujsgSXC46wpEgy8b2Zlid\nbP9lGhGvAYF7QuvosuBp3d7YOc/5372/PYHTtEhxNKq0GVXErNOqXy7pJVma\nrXdP0hKyFHYQZcAYhgFeJEOONZ+3xexMhtfOouXqReWqBckbLLSBGVyHKJwE\nFnKRcpI2RM1Li/b9n8lOXW2Q7OYOQ4CcM1hnzCEYnggwSpkHcxjINQV+A9Qz\n5HRkiE6FS2d+WxUT3NOOBfGMGlji9diTLUSmcqYTbH320Win4jVlFguLcjow\npR10sIfUW2DMjvFZCoJQJrUC0r1d5/JFOrd3M588wSc0N6xLMNa3GHLO6KGe\nKQ88gTZn9Zh7qJIjEcgofhcVEh4ZU4ksvlu/w9jbD90M00Q3ht7vpELiUn1s\n5hHTsZOP8yyGmNIo/FFMrjowbbY1uKOfsNs0UwDEE288QLjMSlSRXe6ysDb9\nxZMeQy2LD5rmKrqNPAlpDJ0R4A4BW7/x0Haso9Z4ypNDMjVkcw9hEEYRv/Ow\nXo+a\r\n=DYbK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","name":"use-descendants","types":"./dist/index.d.ts","module":"./dist/index.modern.js","readme":"# useDescendants ![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-descendants@beta)\n\n> This is the README for beta releases. The \"stable\" (but still v0) release is here: https://github.com/pacocoursey/use-descendants/tree/v0\n\nuseDescendants is a react hook for keeping track of descendant components and their relative indeces. It's based off the [@reach/descendants](https://www.npmjs.com/package/@reach/descendants) package, but faster and smaller.\n\nIf you want to understand more about what this package does or why we need it, read the [Problem Complex](https://www.npmjs.com/package/@reach/descendants) from the @reach/descendants package.\n\nIn 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.\n\nThis enables component composition:\n\n```js\n<List>\n  <Item /> {/* I'm index 0 */}\n  <Item /> {/* I'm index 1 */}\n  <div>\n    <div>\n      <Item /> {/* I'm arbitrarily nested, but still know that I'm index 2 */}\n    </div>\n  </div>\n</List>\n```\n\n## Installation\n\n```\n$ yarn add use-descendants@beta\n```\n\n## Usage\n\nIn 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.\n\n```jsx\nconst Menu = () => {\n  const context = useDescendants()\n  return (\n    <Descendants value={context}>\n      <Item />\n    </Descendants>\n  )\n}\n\nconst Item = () => {\n  const index = useDescendant()\n  return <div>My index is {index}</div>\n}\n```\n\n#### React.memo\n\nItems that use `React.memo` or stable keys will still have an up-to-date index, as they will be forcefully re-rendered whenever the parent re-renders. This means you can safely remove `React.memo`, as it will always be bypassed.\n\n#### Data passing\n\nYou can pass any data you want to `useDescendant` and it will be available in the parent through `map`:\n\n```jsx\n// In Item\nconst ref = useRef()\nconst index = useDescendant({ ref })\n\n// In Menu\nconst context = useDescendants()\nconsole.log(context.map.current)\n// => { '<randomItemId>': { index: 0, props: { ref: HTMLDivElement } } }\n```\n\nYou can also pass un-memoized values or callbacks that are always up-to-date here because it's just kept in a ref:\n\n```jsx\nconst index = useDescendant({\n  onSelect: () => {\n    /* Do something */\n  }\n})\n```\n\n## Credits\n\n- [@reach/descendants](https://www.npmjs.com/package/@reach/descendants) and [Chance](https://twitter.com/chancethedev), who introduced me to this concept\n- [Shu Ding](https://twitter.com/shuding_) for help with a faster, simpler implementation\n","source":"./index.tsx","license":"MIT","scripts":{"build":"microbundle --compress --no-sourcemap --jsx React.createElement","prepublish":"yarn build"},"_npmUser":{"name":"paco","email":"pvco.coursey@gmail.com"},"description":"> This is the README for beta releases. The \"stable\" (but still v0) release is here: https://github.com/pacocoursey/use-descendants/tree/v0","directories":{},"maintainers":[{"name":"paco","email":"pvco.coursey@gmail.com"}],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"typescript":"^4.3.5","microbundle":"^0.13.3","@types/react":"^17.0.17"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/use-descendants_1.0.0-beta.7_1628697954943_0.5083551052857591","host":"s3://npm-registry-packages"},"_id":"use-descendants@1.0.0-beta.7","version":"1.0.0-beta.7"}