Nutella Per Minute

    eyzy-tree

    0.2.2 • Public • Published

    One more React Tree component

    Most expected tree ui component for React.

    NPM version NPM license NPM total downloads NPM monthly downloads

    Documentation | Examples

    assets_-LIk7qYrBMivIw5dM3CP_-LXrbHDPWExqQURbPB5D_-LXrfVI_P7Wt8GJVXrVe_red

    Features

    • flexible configuration
    • rich options
    • rich API
    • events for every action
    • keyboard navigation
    • check boxes
    • multi-selection
    • async support

    Table of Contents

    Getting Started

    Installing a package using the package manager.

    # NPM 
    npm install eyzy-tree
     
    # YARN 
    yarn add eyzy-tree

    Connect in browser.

    <script src="https://cdn.jsdelivr.net/npm/eyzy-tree/dist/eyzy-tree.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/eyzy-tree/dist/style.css" rel="stylesheet" />

    Usage

    import React, { Component } from 'react'
    import EyzyTree from 'eyzy-tree'
    import 'eyzy-tree/style.css'
     
    export default class Tree extends Component {
      constructor(props) {
        super(props);
     
        this.state = {
          data: [
            { text: 'Item 1' },
            { text: 'Item 2' },
            { text: 'Item 3' },
          ],
        };
      }
     
      render() {
        return (
          <div style={{ height: 400 }}>
            <EyzyTree
              data={this.state.data}
            />
          </div>
        );
      }
    }
     

    Customization

    Click here to find out how to configure the component.

    Tree Props

    Property Type Description Default
    data (required) array Specifies the tree nodes
    fetchData function Fetch child node if it has isBatch property
    textRenderer ReactNode Overrides text container. Gets the Node by argument
    arrowRenderer ReactNode Overrides arrow container. Gets the Node by argument
    checkboxRenderer ReactNode Overrides checkbox container. Gets the Node by argument
    checkable boolean Adds a checkbox before the tree nodes false
    noCascade boolean Whether to apply checkbox state to child nodes recursively true
    useIndeterminateState boolean Whether to show indeterminate state for node true
    preventSelectParent boolean Whether to allow to select node which has child (it will expand if true) false
    keyboardNavigation boolean Whether to allow navigate via keyboard true
    selectOnExpand boolean Whether to select a node if it has children false
    expandOnSelect boolean Whether to expand a node if it has children false
    checkOnSelect boolean Selects a node and changes the state of the checkbox. false
    selectOnCheck boolean Whether to select a node if it checked (during the click) false
    theme string Additional class for tree container. eyzy-theme

    Tree Events

    Property Arguments Description
    onReady API Call once when tree is ready (componentDidMount).
    onSelect TreeNode Calls every time when node is selected.
    onUnSelect TreeNode Calls every time when node is unselected.
    onCheck TreeNode Calls every time when node is checked.
    onExpand TreeNode Calls every time when node is expanded.
    onRemove TreeNode Calls every time when node is removed.
    onAdd TreeNode Calls every time when node is added.
    onDoubleClick TreeNode Calls every time when user do double click on the node. Works only when expandOnSelect is not defined or false

    Node Props

    Property Type Description
    id string Node id. If not transmitted, automatically generated.
    text (required) string Node text
    child Array List of child nodes
    data object Any type of data
    isBatch boolean Check the API
    className string Node class name
    checkable boolean Whether to possible to check a node (checkbox will be hidden)
    loading boolean Will be added loading class (indicator is added via CSS)
    selected boolean Whether to select a node
    expanded boolean Whether to expand a node
    checked boolean Whether to check a node (if tree is checkable)
    disabled boolean Whether to disable a node
    disabledCheckbox boolean Whether to disable a node's checkbox

    Licence

    MIT

    Install

    npm i eyzy-tree

    DownloadsWeekly Downloads

    199

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    592 kB

    Total Files

    48

    Last publish

    Collaborators

    • amsik