https://github.com/drcmda/react-animated-tree

🌲Simple to use, configurable tree view with full support for drop-in animations
https://github.com/drcmda/react-animated-tree

Last synced: 28 days ago
JSON representation

🌲Simple to use, configurable tree view with full support for drop-in animations

• Host: GitHub
• URL: https://github.com/drcmda/react-animated-tree
• Owner: drcmda
• License: mit
• Created: 2018-05-13T07:57:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-10-27T06:26:31.000Z (about 2 years ago)
• Last Synced: 2024-05-16T14:03:31.278Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 5.11 MB
• Stars: 823
• Watchers: 15
• Forks: 47
• Open Issues: 14
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/drcmda/react-animated-tree.svg?branch=master)](https://travis-ci.org/drcmda/react-animated-tree) [![npm version](https://badge.fury.io/js/react-animated-tree.svg)](https://badge.fury.io/js/react-animated-tree)

    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

```jsx

import Tree from 'react-animated-tree'

  

    

  

```

Create your own effects by passing a [react-spring](https://github.com/drcmda/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.

```jsx

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 => 

  

```