0.19.0 • Published 5 months ago
react-mutliple-diagram v0.19.0
Package to view block diagram and make blocks connections
install
npm i react-mutliple-diagram
Usage
import React, { ComponentProps, useCallback, useEffect, useState } from 'react';
import { SVGReactDiagram, DiagramItemsType } from 'react-mutliple-diagram';
...
function App() {
const [ items, setItems ] = useState<DiagramItemsType>({});
useEffect(() => {
console.log('items', items);
}, [items]);
const onChange: ComponentProps<typeof SVGReactDiagram>['onChange'] = useCallback((newItems) => {
setItems(newItems);
}, []);
return (
<div className="App">
<SVGReactDiagram
items={items}
onChange={onChange}
/>
onItemChangeClick={(item) => {
console.log('item to change', item);
}}
onItemDeleteClick={(item) => {
console.log('item to delete', item);
const confirm = window.confirm('Are you sure want to remove that item?');
return confirm;
}}
</div>
);
}
Props
Name | Description |
---|---|
items | Object with items to view |
onChange | function (newItems) => void |
loadingText | text on initializing plug |
isLoading | isLoading state to show plug |
onItemChangeClick | function (item) => void fro edit item, if defined then show edit button |
onItemDeleteClick | function (item) => void for confirm delete item, need return true for delete, or false to disable delete, if defined then show remove button |
0.19.0
5 months ago
0.18.1
7 months ago
0.18.0
7 months ago
0.17.2
12 months ago
0.16.3
12 months ago
0.17.3
12 months ago
0.16.4
12 months ago
0.17.5
12 months ago
0.17.6
12 months ago
0.17.7
12 months ago
0.17.8
12 months ago
0.17.9
11 months ago
0.16.0
12 months ago
0.17.0
12 months ago
0.16.1
12 months ago
0.17.1
12 months ago
0.16.2
12 months ago
0.15.11
12 months ago
0.15.10
1 year ago
0.15.9
1 year ago
0.15.8
1 year ago
0.15.7
1 year ago
0.15.5
1 year ago
0.15.4
1 year ago
0.15.3
1 year ago
0.15.2
1 year ago
0.15.1
1 year ago
0.15.0
1 year ago
0.14.2
1 year ago
0.14.1
1 year ago
0.14.0
1 year ago
0.13.0
1 year ago
0.12.0
1 year ago
0.11.0
1 year ago
0.1.0
1 year ago