https://github.com/themojilla/use-deep-descendants
Vue 3 composition utilities to programmatically keep track of descendant components.
https://github.com/themojilla/use-deep-descendants
composable typescript utility-library vue vue-composition-api vue3
Last synced: 10 months ago
JSON representation
Vue 3 composition utilities to programmatically keep track of descendant components.
- Host: GitHub
- URL: https://github.com/themojilla/use-deep-descendants
- Owner: themojilla
- License: mit
- Created: 2021-09-16T15:00:13.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-09-18T05:16:52.000Z (over 4 years ago)
- Last Synced: 2025-07-11T05:23:21.013Z (11 months ago)
- Topics: composable, typescript, utility-library, vue, vue-composition-api, vue3
- Language: TypeScript
- Homepage:
- Size: 61.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useDeepDescendants
[](https://badge.fury.io/js/use-deep-descendants)
> Vue 3 composition utilities to programmatically keep track of descendant components
## Motivation
To achieve better flexibility in terms of composition for creating compound components like `DropDown`, `Listbox`, `Tab` and so forth, there is a common scenario: defining descendants in a non-predictable way as follows:
```vue
// index 0
// index 1
// index 2
// index 3
```
Defining compound components unlock the power of composition. This means that the descendant could be shown in any depth of the component tree. So we need a deterministic way to track the descendants properly.
## Installation
```bash
yarn add use-deep-descendants
```
## Usage
The `use-deep-descendants` exposes two 2 different composition utilities. `useDeepDescendants` and `useRegisterDescendant`. For a complete working example, check out the playground.
### useRegisterDescendant
the `useRegisterDescendant` must be used in descendant component as follow:
```vue
import { computed, defineComponent } from 'vue';
import { useRegisterDescendant } from 'use-deep-descendants';
export default defineComponent({
name: 'ListItem',
setup(props) {
const id = computed(() => {
return Math.random().toString(36).slice(2);
});
const { ref, index } = useRegisterDescendant({ id });
return { ref, index, id };
},
});
```
This utility itself returns a ref and the index. The "index" covers the most certain cases. But additionally, for better accessibility support in some scenarios, you could pass any data to the utility, this data could be accessed in the parent component.
### useDeepDescendants
the `useDeepDescendants` must be used in the parent component as follow:
```vue
{{ descendants }}
import { defineComponent } from 'vue';
import { useDeepDescendants } from 'use-deep-descendants';
export default defineComponent({
name: 'List',
setup() {
const { descendants } = useDeepDescendants();
return { descendants };
},
});
```
This utility itself returns the registered descendants.