# react-animated-tree-ss-fork

> Animate React with ease

Latest version **0.0.1** (published 2020-10-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-animated-tree-ss-fork
pnpm add react-animated-tree-ss-fork
yarn add react-animated-tree-ss-fork
bun add react-animated-tree-ss-fork
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-10-19 |
| First published | 2020-10-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 32.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 823 |
| Author | Paul Henschel |
| Maintainers | stepansazykin |
| Keywords | react, motion, animated, animation, spring |

## Links

- npm: https://www.npmjs.com/package/react-animated-tree-ss-fork
- Repository: https://github.com/drcmda/react-animated-tree
- Homepage: https://github.com/DostoevskyMF/react-animated-tree.git#readme
- Issues: https://github.com/DostoevskyMF/react-animated-tree.git/issues
- npm.io page: https://npm.io/package/react-animated-tree-ss-fork

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-spring](https://npm.io/package/react-spring.md) ^5.3.7
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) 7.0.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.0.1 (latest) — 2020-10-19

## 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.

<p align="middle">
  <img src="assets/tree.gif" width="600" />
</p>

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'

<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](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 => <Tree {...props} springConfig={config} />

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

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