Nanoprogrammed Penultimate Musicianship

    react-lazy-tree

    1.0.4 • Public • Published

    react-lazy-tree

    Recursively render tree data structures.

    Control tree node markup, content and style.

    Render lazily or greedily.

    Specify vertical animation, CSS classes, initial active node, and more.

    Demo

    Please see demo site and example code.

    Status

    CircleCI Coverage Status dependencies Status npm License

    Installation

    npm install --save react-lazy-tree

    Usage

    import ReactLazyTree from 'react-lazy-tree'
     
    ...
     
    <ReactLazyTree {...{
        data: tree,
     
        mapInitialActiveNode: (node) => node.label === 'Dresses',
     
        mapListClassName: ({ depth }) => {
            const exampleDepth = `example--depth-${depth}`;
     
            return `example ${exampleDepth}`;
        },
     
        mapListItemClassName: ({ isOnActivePath }) => {
            const modifier = isOnActivePath ? 'expanded' : 'contracted';
            const nodeIcon = `example__node--${modifier}`;
     
            return `example__node ${nodeIcon}`;
        },
     
        mapNodeContent: ({ depth, isActiveNode }) => {
            const labelDepth = `example__label--${depth}`;
            const isActive = isActiveNode ? 'example__label--active' : '';
            const className = `example__label ${labelDepth} ${isActive}`;
     
            return (
                <Label {...{
                    className,
                    text: node.label
                }}/>
            );
        },
     
        onActiveNodeChanged: activeNodeChangedHandler
    }}/>

    Props API

    data - Tree data structure, or a collection of tree data structures.

    • Type: Object | Array
    • Required: Yes

    mapNodeContent - Specify content, markup, and style for tree node presentation.

    • Type: Function
    • Required: Yes
    • Parameters:
      • depth: Number
      • index: Number
      • isActiveNode: Boolean
      • isLeafNode: Boolean
      • isOnActivePath: Boolean
      • node: Object
    • Return Type: String | JSX
    • Notes: Parameters are named (i.e. properties of an object).

    childrenPropertyName - Specify data node children property name.

    • Type: String
    • Required: No
    • Default: children

    mapListClassName - Specify HTML list (UL) class names.

    • Type: Function
    • Required: No
    • Parameters:
      • depth: Number
      • isOnActivePath: Boolean
      • node: Object
    • Return Type: String
    • Notes: Parameters are named (i.e. properties of an object).

    mapListItemClassName - Specify HTML list-item (LI) class names.

    • Type: Function
    • Required: No
    • Parameters:
      • depth: Number
      • isActiveNode: Boolean
      • isLeafNode: Boolean
      • isOnActivePath: Boolean
      • node: Object
    • Return Type: String
    • Notes: Parameters are named (i.e. properties of an object).

    mapInitialActiveNode - Specify a node that should be active initially.

    • Type: Function
    • Required: No
    • Parameters:
      • node: Object
    • Return Type: Boolean
    • Notes: Returns first match. Multiple active nodes not yet supported.

    onActiveNodeChanged - Handle active node changes as a result of user interaction.

    • Type: Function
    • Required: No
    • Parameters:
      • activePath: String
      • depth: Number
      • e: Object
      • index: Number
      • node: Object
    • Notes: Parameters are named (i.e. properties of an object).

    interactiveStartDepth - Specify at what depth the rendered tree should become interactive. Depth is zero based.

    • Type: Number
    • Required: No
    • Default: 0
    • Notes: To suppress interactivity entirely, specify -1.

    shouldLazyRender - Specify should tree nodes be rendered when becoming visible or at mount time.

    • Type: Boolean
    • Required: No
    • Default: true

    shouldShowAllNodes - Specify the entire tree should be rendered initially.

    • Type: Boolean
    • Required: No
    • Default : false
    • Notes: Overrides shouldLazyRender and mapInitialActiveNode

    verticalAnimationConfig - Specify CSS transition duration and timing.

    • Type: Object
    • Required: No
    • Properties:
    • Default:
      • durationInMs: 300
      • timing: ease-in

    Support

    Please open an issue.

    Examples

    git clone https://github.com/ethanselzer/react-lazy-tree.git
    cd react-lazy-tree/example
    npm install
    npm start

    Development

    git clone https://github.com/ethanselzer/react-lazy-tree.git
    cd react-lazy-tree
    npm install

    See available commands:

    npm run

    Contributing

    Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

    You are awesome! ✨💫

    License

    MIT

    Install

    npm i react-lazy-tree

    DownloadsWeekly Downloads

    126

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • ethanselzer