**lincle** generates a reactive graph.
Please see the various testing [demos](https://lincle.gitlab.io/lincle/) for examples.
If you require an interactive diagram, checkout [`@lincle/interactive`](https://www.npmjs.com/package/react-yad).
## Installation & Setup
Install `@lincle/base` and the peer dependencies `react`, `react-dom`:
```
npm install react react-dom @lincle/base
```
Also include the provided styles file. For example:
```
import '@lincle/base/dist/main.min.css';
```
## Simple Example
The following example will generate this diagram:
);
};
export default App;
```
## Component API's
**\*** *bolded parameters are required*
### ``
| Parameters | Type | Default | Description |
|---|---|---|---|
| **`id`** | `string \| number` | | The unique ID of the graph |
| edgeFrequency | `number` | `16` | Frequency of edge updates during node movements (in ms) |
| grid | `false \| [number, number] ` | `[16, 16]` | The background grid space; false to disable. |
| line | `"curve" \| "direct" \| "step"` | `"step"` | The default curve for the edges |
| nodeFrequency | `number` | `500` | Frequency of node movements reported (in ms, aside from edges) |
| nodeHeight | `number` | `50` | The default height for nodes (in px) |
| nodeWidth | `number` | `50` | The default width for nodes (in px) |
| shape | `"oval" \| "rectangle"` | `"rectangle"` | The default shape for nodes |
### ``
| Parameters | Type | Default | Description |
|---|---|---|---|
| *none* |
### ``
| Parameters | Type | Default | Description |
|---|---|---|---|
| **`id`** | `string \| number` | | The unique ID of the node |
| x | `number` | `0` | The initial `x` coordinate of the node |
| y | `number` | `0` | The initial `y` coordinate of the node |
|
*The following override the defaults provided by ``* |
| height | `number` | `50` | The node height |
| shape | `'oval' \| 'rectangle'` | `rectangle` | The shape of the node |
| width | `number` | `50` | The node width |
### ``
| Parameters | Type | Default | Description |
|---|---|---|---|
| dash | `boolean \| undefined` | `undefined` | Whether dash should be enabled. Defaults to hover only. |
### ``
| Parameters | Type | Default | Description |
|---|---|---|---|
| **`id`** | `string \| number` | | The unique ID for the edge |
| dash | `boolean \| undefined` | `undefined` | Whether dash should be enabled. Defaults to hover only. |
| line | `'curve' \| 'direct' \| 'step'` | `direct` | The line shape (overrides default) and not applicable if custom path generator is used. |
| markerEnd | `string` | | Passed to the default path generated `` SVG |
| markerStart | `string` | | Passed to the default path generated `` SVG |
| path | *path `function` - see below* | | Use to generate a custom path component. |
| **`sourceId`** | `string \| number` | | ID for the source node |
| **`targetId`** | `string \| number` | | ID for the target node |
> ***Note**: The child of `` is intended to be an element at the center of the path. The child will be inside an `` element and should be an SVG type or wrapped in a `` element. See examples for details.*
### Path `function`
Instead of using the `@lincle/base` provided edges (`curve`, `line`, & `step`), you may opt to generate your own path component:
```ts
(
source: {
height: number,
id: string | number,
shape: 'oval' | 'rectangle',
width: number,
x: number,
y: number
},
target: {
height: number,
id: string | number,
shape: 'oval' | 'rectangle',
width: number,
x: number,
y: number
},
children?: ReactNode
) => Component
