All Projects → cheton → React Infinite Tree

cheton / React Infinite Tree

Licence: mit
The infinite-tree library for React.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Infinite Tree

React Async Bootstrapper
Execute a bootstrap method on your React/Preact components. Useful for data prefetching and other activities.
Stars: ✭ 113 (+79.37%)
Mutual labels:  server-side-rendering, react-dom
Fast React Render
[DEPRECATED] Use last versions of React and Node.js for better performance
Stars: ✭ 102 (+61.9%)
Mutual labels:  server-side-rendering, react-dom
Rapscallion
Asynchronous React VirtualDOM renderer for SSR.
Stars: ✭ 1,405 (+2130.16%)
Mutual labels:  server-side-rendering, react-dom
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (+85.71%)
Mutual labels:  server-side-rendering, react-dom
Infinite Tree
A browser-ready tree library that can efficiently display a large amount of data using infinite scrolling.
Stars: ✭ 117 (+85.71%)
Mutual labels:  tree, infinite-scroll
react-cool-virtual
😎 ♻️ A tiny React hook for rendering large datasets like a breeze.
Stars: ✭ 1,031 (+1536.51%)
Mutual labels:  infinite-scroll, server-side-rendering
antony-nuxt
👏 Codes that Power ouorz.com | A Tiny Little Nuxt.js + WP REST API App 博客前端
Stars: ✭ 21 (-66.67%)
Mutual labels:  infinite-scroll, server-side-rendering
React Ssr Prepass
A custom partial React SSR renderer for prefetching and suspense
Stars: ✭ 411 (+552.38%)
Mutual labels:  server-side-rendering, react-dom
Egg React Typescript Boilerplate
Egg React TypeScript Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 56 (-11.11%)
Mutual labels:  react-dom
Dockviz
Visualizing Docker data
Stars: ✭ 1,104 (+1652.38%)
Mutual labels:  tree
Jscroll
An infinite scrolling plugin for jQuery.
Stars: ✭ 1,084 (+1620.63%)
Mutual labels:  infinite-scroll
Repository Tree
🌲Pretty display directory tree view of a GitHub repository.
Stars: ✭ 56 (-11.11%)
Mutual labels:  tree
Mkcolorpicker
ColorPicker is a fantastic color picker 🎨 written in Swift. Developers can use our color picker as is or they can customize it with all the available features
Stars: ✭ 59 (-6.35%)
Mutual labels:  customizable
React Cool Starter
😎 🐣 A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.
Stars: ✭ 1,083 (+1619.05%)
Mutual labels:  server-side-rendering
Ng Toolkit
⭐️ Angular tool-box! Start your PWA in two steps! Add Serverless support for existing projects and much more
Stars: ✭ 1,116 (+1671.43%)
Mutual labels:  server-side-rendering
Swiftypagecontroller
SwiftyPageController will be helpful to use in many pages controller
Stars: ✭ 55 (-12.7%)
Mutual labels:  customizable
Next Pkg
Extended Next.js server with pkg support
Stars: ✭ 55 (-12.7%)
Mutual labels:  server-side-rendering
Rpg Boilerplate
Relay (React), Postgres, and Graphile (GraphQL): A Modern Frontend and API Boilerplate
Stars: ✭ 62 (-1.59%)
Mutual labels:  server-side-rendering
Ki
Go language (golang) full strength tree structures (ki in Japanese)
Stars: ✭ 61 (-3.17%)
Mutual labels:  tree
Angular2 Tree Diagram
Angular Hierarchical UI module
Stars: ✭ 50 (-20.63%)
Mutual labels:  tree

react-infinite-tree build status Coverage Status

NPM

The infinite-tree library for React.

Demo: http://cheton.github.io/react-infinite-tree

react-infinite-tree

Features

Browser Support

Chrome
Chrome
Edge
Edge
Firefox
Firefox
IE
IE
Opera
Opera
Safari
Safari
Yes Yes Yes 9+ Yes Yes

Installation

npm install --save react-infinite-tree

Usage

Tree Structure

A tree structure can either be a node object or an array of node objects, and each node should have a unique id. Note that id, state, children, and parent are reserved keys for defining a node. See below for a basic tree structure:

{
    id: 'fruit',
    name: 'Fruit',
    children: [{
        id: 'apple',
        name: 'Apple'
    }, {
        id: 'banana',
        name: 'Banana',
        children: [{
            id: 'cherry',
            name: 'Cherry',
            loadOnDemand: true
        }]
    }]
}

Rendering Tree Nodes

You can use rowRenderer or pass a child function for rendering tree nodes. The child function will be supplied with the following properties:

import React from 'react';
import InfiniteTree from 'react-infinite-tree';

export default (props) => (
    <InfiniteTree
        width="100%"
        height={400}
        rowHeight={30}
        data={props.data}
    >
    {({ node, tree }) => {
        // Determine the toggle state
        let toggleState = '';
        const hasChildren = node.hasChildren();
        if ((!hasChildren && node.loadOnDemand) || (hasChildren && !node.state.open)) {
            toggleState = 'closed';
        }
        if (hasChildren && node.state.open) {
            toggleState = 'opened';
        }
        
        return (
            <TreeNode
                selected={node.state.selected}
                depth={node.state.depth}
                onClick={event => {
                    tree.selectNode(node);
                }}
            >
                <Toggler
                    state={toggleState}
                    onClick={() => {
                        if (toggleState === 'closed') {
                            tree.openNode(node);
                        } else if (toggleState === 'opened') {
                            tree.closeNode(node);
                        }
                    }}
                />
                <span>{node.name}</span>
            </TreeNode>
        );
    }}
    </InfiniteTree>
);

Components

TreeNode Component

import React from 'react';
import styled from 'styled-components';

const defaultRowHeight = 30;

const TreeNode = styled.div`
    cursor: default;
    position: relative;
    line-height: ${({ rowHeight = defaultRowHeight }) => rowHeight - 2}px;
    background: ${props => props.selected ? '#deecfd' : 'transparent'};
    border: ${props => props.selected ? '1px solid #06c' : '1px solid transparent'};
    padding-left: ${props => props.depth * 18}px;
    .dropdown {
        visibility: hidden;
    }
    &:hover {
        background: #f2fdff;
        .dropdown {
            visibility: inherit;
        }
    }
`;

export default TreeNode;

Toggler Component

import React from 'react';
import styled from 'styled-components';

const Toggler = styled(({ state, ...props }) => (
    <a {...props}>
        {(state === 'closed') &&
        <i className="fa fa-fw fa-chevron-right" />
        }
        {(state === 'opened') &&
        <i className="fa fa-fw fa-chevron-down" />
        }
    </a>
))`
    color: #333;
    display: inline-block;
    text-align: center;
    margin-right: 2px;
`;

export default Toggler;

Example

https://github.com/cheton/react-infinite-tree/blob/master/examples/Tree.jsx

TreeNode

https://github.com/cheton/react-infinite-tree/blob/master/examples/components/TreeNode.jsx

Toggler

https://github.com/cheton/react-infinite-tree/blob/master/examples/components/Toggler.jsx

API

Properties

Name Type Default Description
autoOpen Boolean false Whether to open all nodes when tree is loaded.
selectable Boolean true Whether or not a node is selectable in the tree.
tabIndex Number 0 Specifies the tab order to make tree focusable.
data Array or Object [] Tree data structure, or a collection of tree data structures.
width Number or String '100%' The tree width. It can be a number or string like "auto" or "100%".
height Number The tree height. Setting 100% height is currently not supported. See https://github.com/cheton/react-infinite-tree/issues/8.
rowHeight * Number, Array, or Function({ node: Node, tree: Tree, index: Number }): Number Either a fixed height, an array containing the heights of all the rows, or a function that returns the height of the given node.
rowRenderer Function({ node: Node, tree: Tree, index: Number }): React Node A row renderer for rendering a tree node.
loadNodes Function(parentNode: Node, done: Function) Loads nodes on demand.
shouldSelectNode Function(node: Node): Boolean Provides a function to determine if a node can be selected or deselected. The function must return true or false. This function will not take effect if selectable is not true.
scrollOffset Number Controls the scroll offset.
scrollToIndex Number Node index to scroll to.
onScroll Function(scrollTop: Number, event: React.UIEvent) Callback invoked whenever the scroll offset changes.
onContentWillUpdate Function() Callback invoked before updating the tree.
onContentDidUpdate Function() Callback invoked when the tree is updated.
onOpenNode Function(node: Node) Callback invoked when a node is opened.
onCloseNode Function(node: Node) Callback invoked when a node is closed.
onSelectNode Function(node: Node) Callback invoked when a node is selected or deselected.
onWillOpenNode Function(node: Node) Callback invoked before opening a node.
onWillCloseNode Function(node: Node) Callback invoked before closing a node.
onWillSelectNode Function(node: Node) Callback invoked before selecting or deselecting a node.

Tree Methods

https://github.com/cheton/infinite-tree/wiki/Functions:-Tree

Node Methods

https://github.com/cheton/infinite-tree/wiki/Functions:-Node

Node State

Name Type Description
depth Number The depth of a node.
open Boolean Whether the node is expanded.
path String A unique path string representing a node.
prefixMask String The prefix mask.
total Number The total number of child nodes.

Flat Tree Structure

https://github.com/cheton/flattree/blob/master/examples/tree1.js

<root>: path=".0", parent="", children=2, total=11, depth=0, prefix="0", open=1, lastChild=1
Alpha: path=".0.0", parent=".0", children=0, total=0, depth=1, prefix="00", open=0, lastChild=0
Bravo: path=".0.1", parent=".0", children=3, total=9, depth=1, prefix="00", open=1, lastChild=1
Charlie: path=".0.1.0", parent=".0.1", children=2, total=4, depth=2, prefix="000", open=1, lastChild=0
Delta: path=".0.1.0.0", parent=".0.1.0", children=2, total=2, depth=3, prefix="0001", open=1, lastChild=0
Echo: path=".0.1.0.0.0", parent=".0.1.0.0", children=0, total=0, depth=4, prefix="00011", open=0, lastChild=0
Foxtrot: path=".0.1.0.0.1", parent=".0.1.0.0", children=0, total=0, depth=4, prefix="00011", open=0, lastChild=1
Golf: path=".0.1.0.1", parent=".0.1.0", children=0, total=0, depth=3, prefix="0001", open=0, lastChild=1
Hotel: path=".0.1.1", parent=".0.1", children=1, total=2, depth=2, prefix="000", open=1, lastChild=0
India: path=".0.1.1.0", parent=".0.1.1", children=1, total=1, depth=3, prefix="0001", open=1, lastChild=1
Juliet: path=".0.1.1.0.0", parent=".0.1.1.0", children=0, total=0, depth=4, prefix="00010", open=0, lastChild=1
Kilo: path=".0.1.2", parent=".0.1", children=0, total=0, depth=2, prefix="000", open=0, lastChild=1

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].