@snack-uikit/tree NPM

Tree

Installation

npm i @snack-uikit/tree

Example

selectionMode = 'single'

import { Tree } from '@snack-uikit/tree';

// ...

const [selectedNode, setSelected] = useState<TreeNodeId>();

// ...

<Tree data={data} selectionMode='single' selected={selectedNode} onSelect={setSelected} />

selectionMode = 'multi'

import { Tree } from '@snack-uikit/tree';

// ...

const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);

// ...

<Tree data={data} selectionMode='multi' selected={selectedNodes} onSelect={setSelected} />

Tree

Props

name	type	default value	description
data*	`TreeNodeProps[]`	-	Данные для отрисовки
onNodeClick	`OnNodeClick`	-	Обработчик клика по элементу дерева
expandedNodes	`string[]`	-	Состояние для раскрытых элементов
onExpand	`(expandedKeys: string[], nodeId: string) => void`	-	Колбэк при раскрытии/закрытии элементов
onDataLoad	`(node: TreeNodeProps) => Promise<unknown>`	-	Колбэк для асинхронной загрузки данных при раскрытии дерева
parentActions	`(node: TreeNodeProps) => Item[]`	-	Дополнительные действия для элемента-родителя
nodeActions	`(node: TreeNodeProps) => Item[]`	-	Дополнительные действия для элемента-потомка
showIcons	`boolean`	true	Флаг отвечающий за отображение иконок у элементов дерева
showLines	`boolean`	true	Флаг отвечающий за отображение линий вложенности
className	`string`	-	CSS-класс
selectionMode	"single" \| "multi"	-	Режим выбора элементов: - `Single` - одиночный выбор - `Multi` - множественный выбор - `undefined` - без выбора
selected	`string \\| string[]`	-	Состояние для выбраных элементов: - При selectionMode=`Multi` - принимает массив строк - При selectionMode=`Single` - принимает строку
onSelect	`((selectedKeys: string[], node: TreeNodeProps) => void) \\| ((selectedKey: string, node: TreeNodeProps) => void)`	-	Колбэк при изменении выбраных элементов: - При selectionMode=`Multi` - возвращает массив строк - При selectionMode=`Single` - возвращает строку
showToggle	`boolean`	-

@snack-uikit/button @snack-uikit/icons @snack-uikit/list @snack-uikit/toggles @snack-uikit/truncate-string @snack-uikit/typography @snack-uikit/utils classnames react-transition-state uncontrollable

@everything-registry/sub-chunk-847

0.8.21-preview-08c7f775.0

5 months ago

0.8.9

7 months ago

0.8.8

7 months ago

0.9.6-preview-ce317cd6.0

1 month ago

0.8.5

8 months ago

0.8.4

8 months ago

0.8.35-preview-b0b25986.0

4 months ago

0.8.7

7 months ago

0.8.6

7 months ago

0.8.28-preview-d479ae3f.0

4 months ago

0.8.23-preview-985e2518.0

5 months ago

0.8.40-preview-8c84e870.0

2 months ago

0.9.4

1 month ago

0.8.28-preview-dc056d73.0

3 months ago

0.9.3

1 month ago

0.9.6

1 month ago

0.9.5

1 month ago

0.8.25-preview-704e8703.0

5 months ago

0.8.40-preview-8cf89a18.0

2 months ago

0.9.7-preview-050dc1ef.0

23 days ago

0.8.40-preview-ef227a87.0

2 months ago

0.8.7-preview-4c10b48c.0

7 months ago

0.8.17-preview-91ef6a1d.0

5 months ago

0.8.10-preview-7eeb1bc1.0

7 months ago

0.8.17-preview-bb2cdfb8.0

5 months ago

0.8.26-preview-a2a64ca4.0

4 months ago

0.8.26-preview-74c13173.0

4 months ago

0.8.3

8 months ago

0.8.2

8 months ago

0.8.26-preview-f228eb9d.0

4 months ago

0.8.17-preview-a2f98ef7.0

5 months ago

0.8.11-preview-8feb6773.0

7 months ago

0.8.34-preview-04b740ca.0

3 months ago

0.8.3-preview-e86d2666.0

8 months ago

0.8.36-preview-6a400eba.0

3 months ago

0.8.29-preview-3566ac3d.0

4 months ago

0.8.10-preview-2d408edb.0

7 months ago

0.8.34-preview-9cd1b89a.0

4 months ago

0.9.4-preview-cf198ddd.0

1 month ago

0.9.7-preview-aba585d4.0

21 days ago

0.8.34-preview-a0074739.0

4 months ago

0.8.14-preview-95f36d41.0

6 months ago

0.8.13-preview-aaafcc64.0

6 months ago

0.8.12-preview-e8062bb7.0

7 months ago

0.8.26-preview-922d2ce6.0

4 months ago

0.8.2-preview-1becd961.0

8 months ago

0.8.26-preview-abb5f7dc.0

4 months ago

0.8.25-preview-c95e31d1.0

5 months ago

0.8.10-preview-20b0f520.0

7 months ago

0.8.13-preview-c6f5cbae.0

6 months ago

0.9.7-preview-9998cc23.0

18 days ago

0.9.4-preview-2f8a726b.0

1 month ago

0.8.10-preview-379c4ff3.0

7 months ago

0.8.14-preview-ef08d0db.0

6 months ago

0.8.3-preview-eca10dbc.0

8 months ago

0.8.40-preview-3a05e8da.0

3 months ago

0.8.31-preview-bc9ca5dd.0

4 months ago

0.9.7-preview-2df7e7b5.0

28 days ago

0.9.2-preview-845a4e8b.0

1 month ago

0.8.26-preview-c13438b6.0

4 months ago

0.8.10-preview-baf754b1.0

7 months ago

0.8.5-preview-532f4f48.0

8 months ago

0.8.39-preview-790689b4.0

3 months ago

0.8.26-preview-e840ab81.0

4 months ago

0.8.25-preview-d9538faf.0

5 months ago

0.8.17-preview-38cf19d9.0

5 months ago

0.8.26-preview-b5e187d5.0

4 months ago

0.8.10-preview-042f5ed6.0

7 months ago

0.8.8-preview-7bafd457.0

7 months ago

0.8.34-preview-0d45398a.0

4 months ago

0.8.5-preview-9a7f316b.0

8 months ago

0.8.34

4 months ago

0.8.33

4 months ago

0.8.40-preview-3e55020c.0

2 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

0.8.17-preview-95d8b6b7.0

5 months ago

0.8.38

3 months ago

0.8.37

3 months ago

0.8.39

3 months ago

0.8.17-preview-e49c63bb.0

5 months ago

0.9.0

2 months ago

0.9.2

1 month ago

0.8.20-preview-913f1101.0

5 months ago

0.9.1

2 months ago

0.8.34-preview-27ae78ba.0

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

0.8.26-preview-f7ec3fa7.0

4 months ago

0.8.21

5 months ago

0.8.20

5 months ago

0.8.40-preview-352c392a.0

2 months ago

4 months ago

4 months ago

4 months ago

4 months ago

0.8.14-preview-4d49c519.0

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

5 months ago

0.9.7-preview-69fcfa33.0

18 days ago

0.8.16

6 months ago

0.8.10-preview-4d81b82b.0

7 months ago

0.8.15

6 months ago

0.8.18

5 months ago

0.8.17-preview-0ee176c6.0

5 months ago

0.8.17

5 months ago

0.9.7-preview-e4e8fc7b.0

15 days ago

0.8.10-preview-53bd8747.0

7 months ago

0.8.40-preview-a01e5edb.0

2 months ago

0.8.2-preview-3e824eee.0

8 months ago

0.8.2-preview-eda282a2.0

8 months ago

0.8.2-preview-d1a63029.0

8 months ago

0.8.2-preview-2e497be2.0

8 months ago

0.7.0

8 months ago

0.6.30-preview-ba12ca94.0

8 months ago

0.8.1

8 months ago

0.8.0

8 months ago

0.6.30-preview-71543426.0

8 months ago

0.6.26-preview-e5174ad1.0

8 months ago

0.6.26-preview-efee0b7d.0

8 months ago

0.6.26-preview-7adaddbe.0

8 months ago

0.6.26-preview-c9b51578.0

8 months ago

0.6.26-preview-1f246c4a.0

8 months ago

0.6.26-preview-fc25f08d.0

8 months ago

0.6.29

8 months ago

0.6.26-preview-3f66d646.0

8 months ago

0.6.26-preview-d96c83e8.0

8 months ago

0.6.29-preview-726d2b3b.0

8 months ago

0.6.29-preview-8252c953.0

8 months ago

0.6.29-preview-0c12d89e.0

8 months ago

0.6.28

8 months ago

0.6.27

8 months ago

0.6.26

9 months ago

0.6.26-preview-7c4b3e02.0

9 months ago

0.6.26-preview-4f9628fc.0

9 months ago

0.6.26-preview-1b7c1817.0

9 months ago

0.6.25

9 months ago

0.6.24

9 months ago

0.6.26-preview-eb3592d8.0

9 months ago

0.6.23

9 months ago

0.6.23-preview-e9b53c27.0

9 months ago

0.6.15-preview-8898cdde.0

11 months ago

0.6.18-preview-0406b1f2.0

11 months ago

0.6.22-preview-94780dcd.0

9 months ago

0.6.15-preview-3201b907.0

11 months ago

0.6.10-preview-5dc6c544.0

1 year ago

0.6.20-preview-1e2f74b2.0

10 months ago

0.6.12-preview-b09d21bf.0

11 months ago

0.6.4-preview-c6cf83f0.0

1 year ago

0.6.12-preview-efdf107f.0

11 months ago

0.6.12-preview-665bb1e8.0

11 months ago

0.6.7-preview-47f53a8c.0

1 year ago

0.6.4-preview-b98b3b80.0

1 year ago

0.6.7-preview-b7b8cddc.0

1 year ago

0.6.4-preview-69a8374f.0

1 year ago

0.6.21

10 months ago

0.6.16-preview-3eecfbf4.0

11 months ago

0.6.20

10 months ago

0.6.9-preview-767c086a.0

1 year ago

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago

0.6.16-preview-e8249200.0

11 months ago

0.6.2-preview-d74371e8.0

1 year ago

0.6.9-preview-a66ce7a9.0

1 year ago

0.6.10

1 year ago

0.6.9-preview-1a5a24ad.0

1 year ago

0.6.21-preview-963c3343.0

10 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

0.6.16-preview-2abd8357.0

11 months ago

0.6.7-preview-6ec2d237.0

1 year ago

0.6.17-preview-9bfb36d6.0

11 months ago

0.6.12-preview-40c31ba9.0

11 months ago

0.6.19-preview-31958b7e.0

11 months ago

0.6.2-preview-a5a79952.0

1 year ago

0.6.11-preview-d4831186.0

12 months ago

0.6.4-preview-0df2fefa.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.6.2-preview-41627947.0

1 year ago

0.6.1

1 year ago

0.6.0

1 year ago

0.5.22-preview-8bb3334c.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.5.19-preview-cb79db34.0

1 year ago

0.5.19-preview-86dac340.0

1 year ago

0.5.19-preview-c7516715.0

1 year ago

0.5.19-preview-08779a44.0

1 year ago

0.5.19-preview-7a18c2ee.0

1 year ago

0.5.19-preview-5b75040d.0

1 year ago

0.5.19-preview-69abc1d3.0

1 year ago

0.5.19-preview-80576138.0

1 year ago

0.5.19-preview-2855fb42.0

1 year ago

0.5.19-preview-0a44b2fc.0

1 year ago

0.5.19-preview-261fde59.0

1 year ago

0.5.18

1 year ago

0.5.18-preview-ed4b1f94.0

1 year ago

0.5.17

1 year ago

0.5.17-preview-1fcf96b1.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.5.12-preview-3bc93fc3.0

1 year ago

0.5.12-preview-da21d728.0

1 year ago

0.5.10

1 year ago

0.5.11-preview-84a92753.0

1 year ago

0.5.9

1 year ago

0.5.11-preview-2484f987.0

1 year ago

0.5.11-preview-778a0ef6.0

1 year ago

0.5.8

1 year ago

0.5.9-preview-3cdd8d31.0

1 year ago

0.5.8-preview-993a9cfb.0

1 year ago

0.5.7

1 year ago

0.5.7-preview-ff0b5a40.0

1 year ago

0.5.6

1 year ago

0.5.5

1 year ago

0.5.4-preview-3f90b7f1.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.3.3-preview-00fa1de0.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.1.8-preview-85c5f47b.0

2 years ago