https://github.com/adityasonel/react-animated-tree-v2
🌲 Simple to use, configurable tree view with full support for drop-in animations, react-animated-tree-v2.
https://github.com/adityasonel/react-animated-tree-v2
react-spring reactjs
Last synced: 8 months ago
JSON representation
🌲 Simple to use, configurable tree view with full support for drop-in animations, react-animated-tree-v2.
- Host: GitHub
- URL: https://github.com/adityasonel/react-animated-tree-v2
- Owner: adityasonel
- License: mit
- Created: 2021-04-16T15:46:22.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2025-04-17T05:23:19.000Z (about 1 year ago)
- Last Synced: 2025-09-10T02:57:50.034Z (9 months ago)
- Topics: react-spring, reactjs
- Language: TypeScript
- Homepage: https://adityasonel.github.io/react-animated-tree-v2
- Size: 5.56 MB
- Stars: 11
- Watchers: 1
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/adityasonel/react-animated-tree-v2) [](//npmjs.com/package/react-animated-tree-v2)
Port of [react-animated-tree](https://github.com/drcmda/react-animated-tree), with updated libraries, custom svg icons and many more new features.
npm install react-animated-tree-v2
A simple, configurable tree view control for React.
Demo: https://codesandbox.io/embed/react-animated-tree-v2-33u37
- `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
- `onItemClick`, optional: click events on the tree span item (pass itemId props as parameter)
- `onItemToggle`, optional: click events on the toggle icon, parameters: itemId, isOpen
- `itemId`, optional: custom identifier of tree item
- `icons`, optional: custom svg icons (plus, minus, close and eye)
Customised icon demo: https://codesandbox.io/embed/react-animated-tree-v2-custom-icons-mz23x
```jsx
import Tree from "react-animated-tree-v2";
console.log(itemId)}
>
;
```
Create your own effects by passing a [react-spring](https://github.com/pmndrs/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 =>
```