{"id":19327818,"url":"https://github.com/kenshoo/react-tree","last_synced_at":"2025-10-11T05:33:35.491Z","repository":{"id":54302244,"uuid":"242158070","full_name":"kenshoo/react-tree","owner":"kenshoo","description":"A lightweight, easy-to-navigate selection component that displays hierarchical tree data in a searchable, filterable layout.","archived":false,"fork":false,"pushed_at":"2023-03-30T08:13:09.000Z","size":1142,"stargazers_count":20,"open_issues_count":17,"forks_count":0,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-04-20T09:12:47.443Z","etag":null,"topics":["component","frontend","managedby-tec-dev","material","material-tree","material-ui","public-repo","react","react-components","react-tree","tree","ui"],"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/kenshoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-21T14:29:17.000Z","updated_at":"2023-06-13T13:08:16.000Z","dependencies_parsed_at":"2024-06-12T17:31:51.217Z","dependency_job_id":"4b83b673-ab15-43b1-b240-d871e9cce5e0","html_url":"https://github.com/kenshoo/react-tree","commit_stats":{"total_commits":70,"total_committers":7,"mean_commits":10.0,"dds":0.4714285714285714,"last_synced_commit":"c2419bad40768d22f7e246c0c7f235184d51c74e"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenshoo%2Freact-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenshoo%2Freact-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenshoo%2Freact-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenshoo%2Freact-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenshoo","download_url":"https://codeload.github.com/kenshoo/react-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250328094,"owners_count":21412558,"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":["component","frontend","managedby-tec-dev","material","material-tree","material-ui","public-repo","react","react-components","react-tree","tree","ui"],"created_at":"2024-11-10T02:18:53.161Z","updated_at":"2025-10-11T05:33:30.457Z","avatar_url":"https://github.com/kenshoo.png","language":"JavaScript","readme":"# React Tree\n\n[![Build Status](https://travis-ci.org/kenshoo/react-tree.svg?branch=master)](https://travis-ci.org/kenshoo/react-tree)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/7b44acc9042c5ee410a8/test_coverage)](https://codeclimate.com/github/kenshoo/react-tree/test_coverage)\n\nReact Tree is a straight forward component that allows a user to display and manage a hierarchical structure of items in a clear and comfortable way.\n\n ## Optional Themes\n \nTwo optional themes are supported when using React Tree:\n #### Basic tree\n Includes all the logic, based on @emotion/core - [README](https://github.com/kenshoo/react-tree/blob/master/packages/core/README.md)\n\n  \u003cp align=\"center\"\u003e\n      \u003cimg src=\"https://grid.kenshoo.com/resources-frontend/latest/react-tree/core/demo.gif\" width=\"288\"/\u003e\n  \u003c/p\u003e\n  \n #### Material tree \n Based on the basic tree logic, using Material-UI components - [README](https://github.com/kenshoo/react-tree/blob/master/packages/material_tree/README.md)\n\n  \u003cp align=\"center\"\u003e\n      \u003cimg src=\"https://grid.kenshoo.com/resources-frontend/latest/react-tree/material/demo.gif\" width=\"288\" /\u003e\n  \u003c/p\u003e\n\nBoth options support component customization. \u003cbr/\u003e\nExamples can be found - [here](https://github.com/kenshoo/react-tree/blob/master/packages/docs/stories/core.stories.js)\n\n\u003cbr/\u003e\n\n### Props\n\u003c!-- props-table-start --\u003e\n| Name                   | Type        | Default                | Description                                                     |\n| :------------------    | :---------- | :--------------------- | :-------------------------------------------------------------- |\n| `structure`            | `Array`     | `[]`                   | `Component input - array of leaves along with their ancestors`  |\n| `title`                | `String`    | `\"\"`                   | `Title to be displayed on root mode`                            |\n| `onSelect`             | `Func`      | `() =\u003e {}`             | `callback when clicking a leaf`                                 |\n| `styles`               | `Object`    |                        | `Optional - enables customized styles`                          |\n| `width`                | `number`    | `230 `                 | `The width of the tree component`                               |\n| `height`               | `number`    | `300 `                 | `The height of the tree component`                              |\n| `noResultsText`        | `String`    | `No matching results`  | `The message to be displayed when having no results on searching`                  |\n| `noResultsRenderer`    | `Component` | `no_matching_items.js` | `Component to replace the default NoResults component. `        |\n| `noResultsIconRenderer`| `Component` |                        | `Component to replace the default NoResultsIcon component.`     |\n| `headerRenderer`       | `Component` | `header.js`            | `Component to replace the default Header component.`            |\n| `backIconRenderer`     | `Component` |                       | `Component to replace the default BackIcon component. `          |\n| `inputRenderer`        | `Component` | `input.js️`             | `Component to replace the default Input component. `            |\n| `inputIconRenderer`    | `Component` |                        | `Component to replace the default InputIcon component. `        |\n| `clearIconRenderer`    | `Component` |                        | `Component to replace the default CleaseIcon component. `       |\n| `itemRenderer`         | `Component` | `item.js️`              | `Component to replace the default Item component. `             |\n| `itemsRenderer`        | `Component` | `items.js`             | `Component to replace the default Items component. `            |\n| `forwardIconRenderer`  | `Component` |                        | `Component to replace the default ForwardIcon component. `      |\n| `treeContainerRenderer`| `Component` | `tree_container.js`    | `Component to replace the default TreeContainer component. `    |\n| `customItemsRenderer ` | `Component` |                        | `Component to replace the default Items \u0026\u0026 inner Item component.`|\n| `selectedItem`         | `Object`    |                        | `Optional - enables managing selected item. The Object should contain 2 fields: item and leaf, for example: { item: [\"a\",\"b\",\"c\"], leaf: \"c\" }`                              |\n\u003c!-- props-table-end --\u003e\n\u003cbr/\u003e\n\n## How to Contribute\n\n#### Setting up development environment\n\n1. Fork the repository and create your branch from `master`.\n2. Install the project: `yarn install`\n3. Run tests: `yarn test` or `yarn test:watch`\n4. Run dev environment: `yarn storybook` and head to [https://localhost:6006](https://localhost:6006)\n\n## Credit\n\nStyling patterns were taken from react-select - [README](https://github.com/JedWatson/react-select/blob/master/README.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenshoo%2Freact-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenshoo%2Freact-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenshoo%2Freact-tree/lists"}