Installation

mui-rhf-library is available as an npm package.

// with npm
npm install mui-treeselect-component

// with yarn
yarn add mui-treeselect-component

Demo

Check the storybook of the library: https://62a83daf64071006fcdebc72-hrlbgpsqpf.chromatic.com/?path=/story/treeselect--treeselect-component

Usage

Here is a quick example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import { Treeselect } from 'mui-treeselect-component';

function App() {
    return (
        <>
            <Treeselect
                data={[
                    { id: '1', item: 'Item 1' },
                    {
                        id: 2,
                        item: 'Item 2',
                        children: [{ id: 3, item: 'Item 3' }]
                    }
                ]}
                label="Treeselect"
                idKey="id"
                valueKey="item"
                onChange={
                    ((value) => {
                        //do something with selected value
                        console.log(value);
                    },
                    (dir = 'ltr'))
                }
            />
        </>
    );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Documentation

Treeselect

| Prop | Type | Default | Definition | | ------------ | -------------- | --------------- | -------------------------------------------------- | | data* | any[] | | The data of the treeview | | label* | string | | The label of the textFeild | | idKey | string | "id" | the identifire key in the tree data | | valueKey | string | "name" | the identifire for the value in the tree data | | onChange | function | (value)=>{} | the callback function to access the selected value | | dir | rtl or ltr | ltr | direction of the expand icon of the nodes | | emptyLabel | string | No data found | no optoin placeholder when there is no data | | defaultValue | string | | default value for label | | defaultKey | string | | default id key |

Changelog

Please read the changelog for details of what has changed.

mui-treeselect-component