🌲Simple to use, configurable tree view with full support for drop-in animations
Clone or download
drcmda Merge pull request #5 from PaulCailly/patch-1
Update index.js to fix Issue #4
Latest commit e495af3 Nov 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets first draft May 13, 2018
src Update index.js to fix Issue #4 Nov 12, 2018
.gitignore first draft May 13, 2018
.size-snapshot.json update dependencies May 29, 2018
.travis.yml Added ci cache for yarn May 14, 2018
LICENSE first draft May 13, 2018
index.d.ts Added TypeScript definition file May 16, 2018
package.json 1.0.8 May 29, 2018
readme.md Update readme.md May 13, 2018
rollup.config.js update dependencies May 29, 2018
yarn.lock update dependencies May 29, 2018

readme.md

Build Status npm version

npm install react-animated-tree

A simple, configurable tree view control for React.

Demo: https://codesandbox.io/embed/rrw7mrknyp

  • content, Name of the node (string or React-component)
  • type, optional description, good for displaying icons, too (string or React-component)
  • open, optional: default open state
  • canHide, optional: when set true displays an eye icon
  • visible, optional: default visible state
  • onClick, optional: click events on the eye
  • springConfig, optional: react-spring animation config
import Tree from 'react-animated-tree'

<Tree content="Apple" type="Fruit" open canHide visible onClick={console.log}>
  <Tree content="Contents">
    <Tree content="Seeds" />
  <Tree>
<Tree>

Create your own effects by passing a react-spring config. The config below is the default (items fade in while moving in 20px from the right). You can go wild here by rotating, flipping, etc.

config = open => ({
  from: { height: 0, opacity: 0, transform: 'translate3d(20px,0,0)' },
  to: {
    height: open ? 'auto' : 0,
    opacity: open ? 1 : 0,
    transform: open ? 'translate3d(0px,0,0)' : 'translate3d(20px,0,0)',
  },
})

const SpecialTree = props => <Tree {...props} springConfig={config} />

<SpecialTree content="Orange">
  <SpecialTree content="Juice" />
</SpecialTree>