React Fishbone

Fishbone (Ishikawa) chart component for React.

Installation

npm install @hophiphip/react-fishbone

Usage

import Fishbone from '@hophiphip/react-fishbone';
import '@hophiphip/react-fishbone/style.css';

export default () => {
    return (
        <Fishbone
			items={{
				label: "Root",
				children: [
					{
						label: "Node 1",
						children: [
							{
								label: "Node 1-1",
								children: [
									{
										label: "Node 1-1-1",
									},
								],
							},
							{
								label: "Node 1-2",
							},
							{
								label: "Node 1-3",
							},
						],
					},
					{
						label: "Node 2",
						children: [
							{
								label: "Node 2-1",
							},
							{
								label: "Node 2-2",
							},
							{
								label: "Node 2-3",
							},
						],
					},
					{
						label: "Node 3",
					},
					{
						label: "Node 4",
					},
					{
						label: "Node 5",
						children: [
							{
								label: "Node 5-1",
							},
							{
								label: "Node 5-2",
							},
							{
								label: "Node 5-3",
							},
						],
					},
				],
			}}
		/>
    );
};

API

FishboneNode

Fishbone tree node element

| Property | Type | Description | |:--------:|:-----------------------------:|:----------------------------------------------------:| | label | ReactNode | Contents of fishbone tree node | | children | FishboneNode[] or undefined | Nested fishbone tree children-nodes |

FishboneProps

| Property | Type | Description | |:--------------:|:--------------:|:-----------------------:| | items | FishboneNode | Fishbone tree root node | | reactFlowProps | ReactFlowProps | React flow props |

Dependencies

React fishbone component is based on xyflow.