https://github.com/diogofcunha/react-virtualized-tree

A virtualized tree view component making use of react
https://github.com/diogofcunha/react-virtualized-tree

component folder-structure react react-tree-view reactjs tree tree-view tree-view-component virtualized

Last synced: 3 days ago
JSON representation

A virtualized tree view component making use of react

• Host: GitHub
• URL: https://github.com/diogofcunha/react-virtualized-tree
• Owner: diogofcunha
• License: mit
• Created: 2018-01-06T17:42:04.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-26T23:40:40.000Z (9 months ago)
• Last Synced: 2024-12-05T11:11:20.951Z (8 days ago)
• Topics: component, folder-structure, react, react-tree-view, reactjs, tree, tree-view, tree-view-component, virtualized
• Language: JavaScript
• Homepage: https://diogofcunha.github.io/react-virtualized-tree/
• Size: 12.5 MB
• Stars: 457
• Watchers: 12
• Forks: 100
• Open Issues: 56
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react - react-virtualized-tree - A virtualized tree view component making use of react.  (UI Components / Infinite Scroll / Virtualized List / Virtualized Tree)

README

        
# react-virtualized-tree

[![Travis][build-badge]][build]

[![npm package][npm-badge]][npm]

[![Coveralls][coveralls-badge]][coveralls]

[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/react-virtualized-tree/Lobby)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[build-badge]: https://img.shields.io/travis/diogofcunha/react-virtualized-tree/master.png?style=flat-square

[build]: https://travis-ci.org/diogofcunha/react-virtualized-tree

[npm-badge]: https://img.shields.io/npm/v/react-virtualized-tree.png?style=flat-square

[npm]: https://www.npmjs.com/package/react-virtualized-tree

[coveralls-badge]: https://img.shields.io/coveralls/diogofcunha/react-virtualized-tree/master.png?style=flat-square

[coveralls]: https://coveralls.io/github/diogofcunha/react-virtualized-tree







## Introduction

**react-virtualized-tree** is a tree view react library built on top of [react-virtualized](https://bvaughn.github.io/react-virtualized/#/components/List)

Its main goal is to display tree like data in a beautiful and fast way. Being a reactive library it uses children functions to achieve maximum extensibility. The core idea behind it is that anyone using it is enable to create a tree as they intent just by rendering their own components or components exported by the tree.

Demo and docs can be found [in here](https://diogofcunha.github.io/react-virtualized-tree/#/examples/basic-tree).

## Installation

You can install via npm or yarn.

`npm i react-virtualized-tree --save`

or

`yarn add react-virtualized-tree`

To get the basic styles for free you need to import react-virtualized styles only once.

```

import 'react-virtualized/styles.css'

import 'react-virtualized-tree/lib/main.css'

```

If you want to use the icons in the default renderers do the same for material icons.

`import 'material-icons/css/material-icons.css'`

## Usage

To use the standalone tree

`import Tree from 'react-virtualized-tree'`

To use the FilteringContainer

`import { FilteringContainer } from 'react-virtualized-tree'`

## Dependencies

Most react-virtualized-tree Dependencies are managed internally, the only required peerDependencies are **react**, **react-dom** and **react-virtualized**.