Get the component ancestry in React
MIT License
This package provides a React component which tells you the ancestry of this component, up until the root component.
It uses React internals, and can therefore potentially fail (return an empty array) for untested versions of React. It is currently tested on React 16, 17 and 18, dev and prod builds.
If you have a production build of your app, the component names may be shortened/uglified.
There are two ways to use this API. One is to use getAncestry()
and provide a component. The other is to place an <Ancestry>
component somewhere and get the ancestry as a callback.
Both methods result in an array of AncestryElement
:
interface AncestryElement
{
name: string;
type: 'component' | 'element';
}
You can use getAncestry
to get the ancestry of a component:
import { getAncestry } from 'react-ancestry'
const ancestry = getAncestry( component ); // Array of AncestryElement
<Ancestry>
Place the Ancestry
component where you want to know the ancestry and use the prop onAncestry
to get a callback of the ancestry as an array of AncestryElement
on the form:
Example:
import { useCallback } from 'react'
import { Ancestry, AncestryElement } from 'react-ancestry'
function MyComponent( )
{
const onAncestry = useCallback(
( ancestry: Array< AncestryElement > ) =>
{
console.log( "Ancestry:", ancestry );
},
[ ]
);
return <>
...
<Ancestry onAncestry={ onAncestry } />
...
</>
}
When used as:
<Foo>
<Bar>
<div>
<Baz>
<MyComponent />
</Baz>
</div>
</Bar>
</Foo>
will console.log:
[
{ name: 'Foo', type: 'component' },
{ name: 'Bar', type: 'component' },
{ name: 'div', type: 'element' },
{ name: 'Baz', type: 'component' },
{ name: 'MyComponent', type: 'component' },
]