open-index/open-npm huggingface dataset:
npm package: @hophiphip/react-fishbone
Description: Fishbone ([Ishikawa](https://en.wikipedia.org/wiki/Ishikawa_diagram)) chart component for React.
Latest version: 0.5.3

# React Fishbone

Fishbone ([Ishikawa](https://en.wikipedia.org/wiki/Ishikawa_diagram)) chart component for React.

## Installation

```bash
npm install @hophiphip/react-fishbone
```

## Usage

```tsx
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](#fishbonenode)[] or `undefined` | Nested fishbone tree children-nodes                  |

### FishboneProps

| Property       | Type           | Description             |
|:--------------:|:--------------:|:-----------------------:|
| items          | [FishboneNode](#fishbonenode)   | Fishbone tree root node |
| layout         | [LayoutFunction]                | Fishbone layout function    |
| reactFlowProps | [ReactFlowProps](https://reactflow.dev/api-reference/react-flow#common-props) | React flow props        |

### Dependencies

React fishbone component is based on [xyflow](https://github.com/xyflow/xyflow/tree/main).
npm package: @hophiphip/use-rich-input-react
Description: React hooks and headless components for building your own rich input component implementation
Latest version: 1.2.0

# Use React Rich Input

This package contains hooks and building blocks for rich input component.

## Usage example

See [minimal rich input implementation](./public/usage-example.tsx)

## Development

### Run dev server
```
pnpm dev
```

### Build package
```
pnpm build
```

## Implementation

This component is implemented without `contenteditable` attribute.
Current implementation uses overlay component to display `input` contents.

![Overlay logic](./media/rich-input-layers.jpg)

This approach was presented in this article: 
- https://akashhamirwasia.com/blog/building-highlighted-input-field-in-react/