Geist UI

File Tree

Display a list of files and folders in a hierarchical tree structure.

All folders and files are sorted automatically.

Use props value to show more complex file tree.

Use props value to show more complex file tree.

Path will be reported when file is clicked.

Attribute	Description	Type	Accepted values	Default
value	value of files	`Array<FileTreeValue>`	-	-
initialExpand	expand by default	`boolean`	-	`false`
onClick	click file event	`(path: string) => void`	-	-
...	native props	`HTMLAttributes`	`'id', 'title', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
name(required)	file name	`string`	-	-
extra	extra message	`string`	-	-
...	native props	`HTMLAttributes`	`'id', 'title', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
name(required)	folder name	`string`	-	-
extra	extra message	`string`	-	-
...	native props	`HTMLAttributes`	`'id', 'title', 'className', ...`	-

type FileTreeValue = {
  type: 'directory' || 'file'
  name: string
  extra?: string
  files?: Array<FileTreeValue>
}

Contributors