react-ancenstry

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.

API

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';
}

getAncestry

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' },
]