# react-expandable-tree

> tree view of companies and users

Latest version **0.0.9** (published 2017-02-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-expandable-tree
pnpm add react-expandable-tree
yarn add react-expandable-tree
bun add react-expandable-tree
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2017-02-20 |
| First published | 2017-02-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | fauna5 |
| Maintainers | fauna5 |

## Links

- npm: https://www.npmjs.com/package/react-expandable-tree
- Repository: https://github.com/fauna5/react-expandable-tree
- Homepage: https://github.com/fauna5/react-expandable-tree#readme
- Issues: https://github.com/fauna5/react-expandable-tree/issues
- npm.io page: https://npm.io/package/react-expandable-tree

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^15.4.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [react-height](https://npm.io/package/react-height.md) ^2.2.0
- [react-motion](https://npm.io/package/react-motion.md) ^0.4.7
- [react-collapse](https://npm.io/package/react-collapse.md) ^3.2.0
- [babel-plugin-react-css-modules](https://npm.io/package/babel-plugin-react-css-modules.md) ^2.2.0
- [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^15.4.2

## Recent versions

- 0.0.9 (latest) — 2017-02-20
- 0.0.8 — 2017-02-20
- 0.0.7 — 2017-02-13
- 0.0.6 — 2017-02-12
- 0.0.4 — 2017-02-10
- 0.0.3 — 2017-02-10
- 0.0.2 — 2017-02-10
- 0.0.1 — 2017-02-10

## README

[![Build Status](https://travis-ci.org/fauna5/react-expandable-tree.svg?branch=master)](https://travis-ci.org/fauna5/react-expandable-tree) ![Dependencies](https://david-dm.org/fauna5/react-expandable-tree.svg) [![devDependencies Status](https://david-dm.org/fauna5/react-expandable-tree/dev-status.svg)](https://david-dm.org/fauna5/react-expandable-tree?type=dev)

# react-expandable-tree

Displays an expandable tree based on some JSON that you provide. 

![expandable tree gif](https://raw.githubusercontent.com/fauna5/react-expandable-tree/master/react-expandable-tree.gif)

It expects the data to arrive asynchronously. i.e. it has an initial loading spinner and expects you to push the data in once your XHR has completed. 

All the group hierarchy and clients are loaded together. User data is loaded when the client expands.

## Usage

```jsx
import Tree from 'react-expandable-tree'

function onGroupSelected(itemId) {
	console.log(itemId, 'was clicked')
}

function onClientSelected(itemId) {
    console.log(itemId, 'was clicked')
    setTimeout(() => { // Fake XHR
        component.onUserDataLoaded(userData)
    }, 1000)
}

function onUserSelected(itemId) {
	console.log(itemId, 'was clicked')
}

const component = ReactDOM.render(
		<Tree onGroupSelected={onGroupSelected} onClientSelected={onClientSelected} onUserSelected={onUserSelected}/>,
		myDiv
	)

setTimeout(() => { // Fake XHR
	component.onDataLoaded(initialData)
}, 1000)

```

## Props

#### `onGroupSelected(itemId)`: PropTypes.func

Callback when a `group` is selected in the tree.

#### `onClientSelected(itemId)`: PropTypes.func

Callback when a `client` is selected in the tree. Typically used to initiate the call to load the user list for that client.

#### `onUserSelected(userId)`: PropTypes.func

Callback when a `user` is selected in the tree.

#### `data`: PropTypes.object

You can provide the data for `group`s and `client`s up front if you have it already. This will not render the spinner and put the tree on the screen on first render. This is useful for testing.

## Functions for pushing data into the tree

#### `Tree.onDataLoaded(data)`

Call this method to push in all `group` and `client` data

#### `Tree.onUserDataLoaded(data)`

Call this method to push in all `user` data

## Data examples

#### Groups and Clients

```jsx
{
  groups: [
    {
        id: 1,
        name: 'Japan',
        groups: [
            {
                id: 2,
                name: 'Automotive',
                clients: [
                    {
                        id: 3,
                        name: 'Mitsubishi'
                    },
                    {
                        id: 4,
                        name: 'Nissan'
                    },
                    {
                        id: 5,
                        name: 'Toyota'
                    }
                ]
            }
        ]
    }
  ]
}                       
```

#### Users

```jsx
[
    {
        firstName: 'User',
        lastName: 'One',
        userName: 'user1@client1.com'
    },
    {
        firstName: 'User',
        lastName: 'Two',
        userName: 'user2@client1.com'
    },
    {
        firstName: 'User',
        lastName: 'Three',
        userName: 'user3@client1.com'
    }
]
```

---
_Source: https://npm.io/package/react-expandable-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._