0.5.2 • Published 9 months ago

@hophiphip/react-fishbone v0.5.2

Weekly downloads
-
License
-
Repository
-
Last release
9 months ago

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

PropertyTypeDescription
labelReactNodeContents of fishbone tree node
childrenFishboneNode[] or undefinedNested fishbone tree children-nodes

FishboneProps

PropertyTypeDescription
itemsFishboneNodeFishbone tree root node
reactFlowPropsReactFlowPropsReact flow props

Dependencies

React fishbone component is based on xyflow.

0.5.2

9 months ago

0.5.0

9 months ago

0.4.1

9 months ago

0.5.1

9 months ago

0.4.0

3 years ago

0.3.0

3 years ago

0.2.0

3 years ago

0.1.0

3 years ago