# react-data-tree > highly customizable node tree for react Latest version **0.1.7** (published 2022-09-29) · MIT license · 0 weekly downloads ## Install ```sh npm install react-data-tree pnpm add react-data-tree yarn add react-data-tree bun add react-data-tree ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.7 | | Published | 2022-09-29 | | First published | 2022-09-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 46.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | gm1957 | | Maintainers | gm1957 | | Keywords | react, checkbox, tree | ## Links - npm: https://www.npmjs.com/package/react-data-tree - Repository: https://github.com/GM1957/react-data-tree - Homepage: https://github.com/GM1957/react-data-tree#readme - Issues: https://github.com/GM1957/react-data-tree/issues - npm.io page: https://npm.io/package/react-data-tree ## Dependencies (7) - [react](https://npm.io/package/react.md) ^18.2.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [typescript](https://npm.io/package/typescript.md) ^4.8.3 - [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4 - [@types/node](https://npm.io/package/@types/node.md) ^16.11.59 - [@types/react](https://npm.io/package/@types/react.md) ^18.0.21 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.0.6 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.7 (latest) — 2022-09-29 - 0.1.6 — 2022-09-29 - 0.1.5 — 2022-09-29 - 0.1.4 — 2022-09-29 - 0.1.3 — 2022-09-28 - 0.1.2 — 2022-09-28 - 0.1.1 — 2022-09-28 - 0.1.0 — 2022-09-28 ## README # React Data Tree Highly customizable node tree component with flatten data structure to interact intensly and easily ![](https://github.com/GM1957/react-data-tree/blob/main/assets/example.gif) ## Installation Install the library using your favorite dependency manager: ```bash npm install react-data-tree --save ``` Or using yarn: ```bash yarn add react-data-tree ``` ## Usage/Examples ```javascript import React from "react"; import { NodeTreeView, NodeOperations } from "react-data-tree"; import { AiOutlineCheckSquare, AiOutlineMinusSquare } from "react-icons/ai"; function App() { const [metaData, setMetaData] = React.useState({}); const data = [ { id: "unique-id-1", name: "Carmelita Rose", children: [ { id: "unique-id-1-1", name: "Ilmi Carlitos", }, { id: "unique-id-1-2", name: "Mojgan Cateline", children: [ { id: "unique-id-1-2-1", name: "Ida Erich", children: [ { id: "unique-id-1-2-1-1", name: "Ilmi Carlitos", }, { id: "unique-id-1-2-1-2", name: "Mojgan Cateline", children: [ { id: "unique-id-1-2-1-2-1", name: "Ida Erich", }, { id: "unique-id-1-2-1-2-2", name: "Olimpia Bertrand", }, ], }, ], }, { id: "unique-id-1-2-2", name: "Olimpia Bertrand", }, ], }, ], }, { id: "unique-id-2", name: "Terezija Paulus", children: [ { id: "unique-id-2-1", name: "Shemu'el Sneha", }, ], }, ]; const CustomNodeComponent = ({ nodeData, parentNodeIds, isLastNode }) => { return (
{ e.preventDefault(); e.stopPropagation(); setMetaData((oldData) => { const operations = new NodeOperations( oldData, nodeData?.id, parentNodeIds, data ); return operations.defaultClickOperation(); }); }} > {metaData[nodeData?.id]?.isChecked ? ( metaData[nodeData?.id]?.isSemiChecked ? ( ) : ( ) ) : (
)}
{nodeData.name}
{ setMetaData((ldData) => { const oldData = JSON.parse(JSON.stringify(ldData)); return { ...oldData, [nodeData?.id]: { ...oldData[nodeData?.id], isNodeExpanded: !( oldData && oldData[nodeData?.id]?.isNodeExpanded ), }, }; }); }} style={{ cursor: "pointer", marginLeft: "10px" }} > {!isLastNode ? ( metaData[nodeData?.id]?.isNodeExpanded ? (
{"^"}
) : (
{">"}
) ) : null}
); }; return (
); } export default App; ``` ## API Reference #### Through metaData state we can control the whole node tree, on clicking operations with the methods from NodeOperations we can get status of all nodes ### metaData | key | Type | Description | | :-------- | :------- | :------------------------- | | `isChecked` | `boolean` | current clicked node selection status | | `isSemiChecked` | `boolean` | if all nested nodes are not selected of a parent node | | `isNodeExpanded` | `boolean` | is node expanded / nested nodes are visible status | | `childrenIds` | `[string]` | children ids of a parent | | `children` | `undefined` | children is a reserved key which will be always undefined | ### data ``` type mainDataNode = { id: string; children?: dataType; [key: string]: any; }; type data = Array ``` ### NodeComponent #### make your custom node component, you will get some necessary details in props | Parameter | Type | Description | | :-------- | :------- | :------------------------- | | `nodeData` | `mainDataNode` | all node details which you gave in json such as id,name except `children` | | `parentNodeIds` | `[parent node id]` | this array will contain all parents id of a node in outside to inside manner | | `isLastNode` | `boolean` | is current node is the deepest node | ### Class `NodeOperations` ```new``` ```NodeOperations(metaData, id, parentNodeIds, treeData)``` | Parameter | Type | Description | | :-------- | :------- | :------------------------- | | `metaData` | `React state` | { uniqueNodeKey: { state details for the perticular node }} | | `id` | `Unique node id` | id should be always unique | | `parentNodeIds` | `[parent node id]` | this array will contain all parents id of a node in outside to inside manner | | `treeData` | `JSON` | recursive json data which | ### Methods - `getFlattenedData()` will convert json tree data into metaData structure we can pass custom node modifier function as a parameter `getFlattenedData(treeNodeModifier)` which takes nodeDetails (mainDataNode) as input - `getIndivisualCheckBoxClickedData({})` by default it will make `isChecked=true` of clicked node, also we can provide metaData and custom node modifier with it `getIndivisualCheckBoxClickedData({ modifiedData, clickedObjectModifier })` - `getChildrenClickedData({})` by default it will make `isChecked=true` for all children of current node also we can provide metaData and custom children modifier with it `getChildrenClickedData({ modifiedData, childObjectsModifier })` - `getAllParentCheckedData({})` by default it will make `isChecked=true` for all parent of current node also it calculates and makes `isSemiChecked=true` conditionally, we can provide metaData and custom parent modifier with it `getAllParentCheckedData({ modifiedData, parentObjectsModifier })` - `defaultClickOperation()` executes a click operation from provided data in the class and using above mentiond methods in default environment --- _Source: https://npm.io/package/react-data-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._