react-treeviewselect v1.0.4

react-treeviewselect

A react based select control where the drop down is a tree view.

React/JS is not my first language, so open to suggestions for improvements as I have not seen a useful version of this control elsewhere, so I want this to be robust.

Features

• Attempts to be WAI-ARIA compliant compliant although not thoroughly tested. Support for ARIA attributes and keyboard interactions. Issues welcome
• Mobile friendly
• Full control over item rendering.
• Can use with any structure, as it uses callbacks for composing tree.
• Typescript typings.

Installation

yarn add react-treeviewselect

or

npm install react-treeviewselect --save

Basic Usage

import { TreeViewSelect } from "react-treeviewselect";

function renderManagerLink(manager) {
    return <span
        key={manager.id}
    >
        {manager.name}
    </span>;
}

function renderSelectedManager(manager) {
    return <div className="d-inline-block">{manager.name}</div>;
}

function getChildren(item) {
    return item.reports;
}

function getParent(item) {
    return item.manager;
}

function getKey(item) {
    return item.id;
}

function onSelectedItemChange(item: IManager) {
    console.log(item.name);
}

class Example extends React.Component {
  constructor(props) {
        super(props);

        this.state = {};
        this.onSelectedItemChange = this.onSelectedItemChange.bind(this);
    }

  render() {

    return (
      <TreeViewSelect
                        style={{ width: "20rem" }}
                        defaultCollapsed={1}
                        renderSelectedItem={renderSelectedManager}
                        selectedItem={manager}
                        item={hierarchy.manager}
                        getChildren={getChildren}
                        getParent={getParent}
                        getKey={getKey}
                        renderItem={renderManagerLink}
                        onSelectedItemChange={onSelectedItemChange}
                    />
    );
  }
}

Props

License

MIT