<ReferenceNodeInput> Component

This Enterprise Edition component allows users to select one or several nodes from a tree of a reference resource. For instance, this is useful to select a category for a product.

Usage

Use <ReferenceNodeInput> in a react-admin form, and set the reference and source props just like for a <ReferenceInput>.

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { ReferenceNodeInput } from '@react-admin/ra-tree';

const ProductEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="name" />
            <ReferenceNodeInput
                source="category_id"
                reference="categories"
            />
        </SimpleForm>
    </Edit>
);

<ReferenceNodeInput> is a controller component, i.e. it fetches the tree from the reference resource, creates a tree choices context, and renders its child component.

By default <ReferenceNodeInput> will render a simple <TreeInput> as its child. If you need to customize the <TreeInput> props, e.g. set the multiple prop, you will need to pass the child explicitly:

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { ReferenceNodeInput, TreeInput } from '@react-admin/ra-tree';

const ProductEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="name" />
            <ReferenceNodeInput
                source="category_id"
                reference="categories"
            >
                <TreeInput multiple />
            </ReferenceNodeInput>
        </SimpleForm>
    </Edit>
);

Props

Prop Required Type Default Description
reference Required string - The reference resource
source Required string - The name of the source field
children Optional React Element <TreeInput> The child component responsible for rendering the input
meta Optional object - An object containing metadata to be passed when calling the dataProvider

children

<ReferenceNodeInput> accepts only one child, which is responsible for rendering the input. By default, it renders a simple <TreeInput> with no props. If you need to pass additional props to <TreeInput>, you will need to pass them explicitely:

<ReferenceNodeInput source="category_id" reference="categories">
    <TreeInput multiple checkStrictly={false} />
</ReferenceNodeInput>

meta

Use the meta prop to pass metadata to the dataProvider when calling getTree():

<ReferenceNodeInput 
    source="category_id" 
    reference="categories" 
    meta={{ foo: 'bar' }}
/>

reference

Use the reference prop to specify the reference resource:

<ReferenceNodeInput source="category_id" reference="categories" />

source

Use the source prop to specify the name of the source field:

<ReferenceNodeInput source="category_id" reference="categories" />