{"id":13394295,"url":"https://github.com/drcmda/react-animated-tree","last_synced_at":"2025-05-15T20:03:44.908Z","repository":{"id":41463438,"uuid":"133216878","full_name":"drcmda/react-animated-tree","owner":"drcmda","description":"🌲Simple to use, configurable tree view with full support for drop-in animations","archived":false,"fork":false,"pushed_at":"2022-10-27T06:26:31.000Z","size":5356,"stargazers_count":830,"open_issues_count":14,"forks_count":47,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-08T01:38:44.623Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drcmda.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-13T07:57:13.000Z","updated_at":"2025-03-23T20:54:35.000Z","dependencies_parsed_at":"2023-01-19T23:14:45.868Z","dependency_job_id":null,"html_url":"https://github.com/drcmda/react-animated-tree","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcmda%2Freact-animated-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcmda%2Freact-animated-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcmda%2Freact-animated-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcmda%2Freact-animated-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drcmda","download_url":"https://codeload.github.com/drcmda/react-animated-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253206213,"owners_count":21871170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:15.214Z","updated_at":"2025-05-15T20:03:40.423Z","avatar_url":"https://github.com/drcmda.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","React"],"sub_categories":["React Components"],"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)\n\n    npm install react-animated-tree\n\nA simple, configurable tree view control for React.\n\n\u003cp align=\"middle\"\u003e\n  \u003cimg src=\"assets/tree.gif\" width=\"600\" /\u003e\n\u003c/p\u003e\n\nDemo: https://codesandbox.io/embed/rrw7mrknyp\n\n* `content`, Name of the node (string or React-component)\n* `type`, optional description, good for displaying icons, too (string or React-component)\n* `open`, optional: default open state\n* `canHide`, optional: when set true displays an eye icon\n* `visible`, optional: default visible state\n* `onClick`, optional: click events on the eye\n* `springConfig`, optional: react-spring animation config\n\n```jsx\nimport Tree from 'react-animated-tree'\n\n\u003cTree content=\"Apple\" type=\"Fruit\" open canHide visible onClick={console.log}\u003e\n  \u003cTree content=\"Contents\"\u003e\n    \u003cTree content=\"Seeds\" /\u003e\n  \u003cTree\u003e\n\u003cTree\u003e\n```\n\nCreate 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.\n\n```jsx\nconfig = open =\u003e ({\n  from: { height: 0, opacity: 0, transform: 'translate3d(20px,0,0)' },\n  to: {\n    height: open ? 'auto' : 0,\n    opacity: open ? 1 : 0,\n    transform: open ? 'translate3d(0px,0,0)' : 'translate3d(20px,0,0)',\n  },\n})\n\nconst SpecialTree = props =\u003e \u003cTree {...props} springConfig={config} /\u003e\n\n\u003cSpecialTree content=\"Orange\"\u003e\n  \u003cSpecialTree content=\"Juice\" /\u003e\n\u003c/SpecialTree\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrcmda%2Freact-animated-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrcmda%2Freact-animated-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrcmda%2Freact-animated-tree/lists"}