react-tree

KO | EN

gitlite — search

#python #ai #golang #machine-learning #docker #nodejs #macos #java #awesome #cli #vue #ios #mcp #openai

(★ 20)

A lightweight, easy-to-navigate selection component that displays hierarchical tree data in a searchable, filterable layout.

react-tree 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Tree

[![Build Status](https://travis-ci.org/kenshoo/react-tree.svg?branch=master)](https://travis-ci.org/kenshoo/react-tree)
[![Test Coverage](https://api.codeclimate.com/v1/badges/7b44acc9042c5ee410a8/test_coverage)](https://codeclimate.com/github/kenshoo/react-tree/test_coverage)

React Tree is a straight forward component that allows a user to display and manage a hierarchical structure of items in a clear and comfortable way.

## Optional Themes
 
Two optional themes are supported when using React Tree:
 #### Basic tree
 Includes all the logic, based on @emotion/core - [README](https://github.com/kenshoo/react-tree/blob/master/packages/core/README.md)

<img src="https://grid.kenshoo.com/resources-frontend/latest/react-tree/core/demo.gif" width="288"/>
 
 
 #### Material tree 
 Based on the basic tree logic, using Material-UI components - [README](https://github.com/kenshoo/react-tree/blob/master/packages/material_tree/README.md)

Both options support component customization. 
Examples can be found - [here](https://github.com/kenshoo/react-tree/blob/master/packages/docs/stories/core.stories.js)

### Props

| Name | Type | Default | Description |
| :------------------ | :---------- | :--------------------- | :-------------------------------------------------------------- |
| `structure` | `Array` | `[]` | `Component input - array of leaves along with their ancestors` |
| `title` | `String` | `""` | `Title to be displayed on root mode` |
| `onSelect` | `Func` | `() => {}` | `callback when clicking a leaf` |
| `styles` | `Object` | | `Optional - enables customized styles` |
| `width` | `number` | `230 ` | `The width of the tree component` |
| `height` | `number` | `300 ` | `The height of the tree component` |
| `noResultsText` | `String` | `No matching results` | `The message to be displayed when having no results on searching` |
| `noResultsRenderer` | `Component` | `no_matching_items.js` | `Component to replace the default NoResults component. ` |
| `noResultsIconRenderer`| `Component` | | `Component to replace the default NoResultsIcon component.` |
| `headerRenderer` | `Component` | `header.js` | `Component to replace the default Header component.` |
| `backIconRenderer` | `Component` | | `Component to replace the default BackIcon component. ` |
| `inputRenderer` | `Component` | `input.js️` | `Component to replace the default Input component. ` |
| `inputIconRenderer` | `Component` | | `Component to replace the default InputIcon component. ` |
| `clearIconRenderer` | `Component` | | `Component to replace the default CleaseIcon component. ` |
| `itemRenderer` | `Component` | `item.js️` | `Component to replace the default Item component. ` |
| `itemsRenderer` | `Component` | `items.js` | `Component to replace the default Items component. ` |
| `forwardIconRenderer` | `Component` | | `Component to replace the default ForwardIcon component. ` |
| `treeContainerRenderer`| `Component` | `tree_container.js` | `Component to replace the default TreeContainer component. ` |
| `customItemsRenderer ` | `Component` | | `Component to replace the default Items && inner Item component.`|
| `selectedItem` | `Object` | | `Optional - enables managing selected item. The Object should contain 2 fields: item and leaf, for example: { item: ["a","b","c"], leaf: "c" }` |

## How to Contribute

#### Setting up development environment

1. Fork the repository and create your branch from `master`.
2. Install the project: `yarn install`
3. Run tests: `yarn test` or `yarn test:watch`
4. Run dev environment: `yarn storybook` and head to [https://localhost:6006](https://localhost:6006)

## Credit

Styling patterns were taken from react-select - [README](https://github.com/JedWatson/react-select/blob/master/README.md)

react-tree

react-tree 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-tree

react-tree 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README