@nui-react/tree-view NPM

@nui-react/tree-view

Fully customized react component.

Installation

Install @nui-react/tree-view with npm, pnpm or yarn

  npm i @nui-react/tree-view

  pnpm add @nui-react/tree-view

  yarn add @nui-react/tree-view

Usage/Examples

import {
  TreeView,
  TreeItem,
  TreeItemContainer,
  TreeBadge,
} from "@nui-react/tree-view";

function App() {
  return (
    <TreeView header="my tree view">
      <TreeItemContainer>
        <TreeItem title="title 1">
          this is a react Tree View component
          <TreeBadge label="my badge" />
        </TreeItem>
      </TreeItemContainer>
    </TreeView>
  );
}

@nui-react/tree-view Sample UI

Components

<TreeView>

Prop	Type	Description	Value
`header`	`string`	Required.	`text`
`children`	`ReactNode`	Optional.	`<TreeItemContainer>`, `<CirclePointer/>`
`theme`	`string`	Optional.	`dark` or `light`. (Default is `dark`)

<TreeItemContainer>

Prop	Type	Description	Value
`children`	`ReactNode`	Required.	`<TreeItem>`, `<TreeExpander>` or any `ReactNode`

<TreeItem>

Prop	Type	Description	Value
`title`	`string`	Required.	`text`
`children`	`ReactNode`	Optional.	`<TreeText>` , `<TreeBadge>` or any `ReactNode`
`direction`	`string`	Optional.	`col` or `row`. (Default is `row`)
`bgGradientSize`	`number`	Optional.	any number between `0-100` (Default is `100`)
`titleWidth`	`number`	Optional.	any number between `10-100`

<TreeExpander>

Prop	Type	Description	Value
`header`	`string`	Required.	`text`
`children`	`ReactNode`	Required.	any `ReactNode`
`expanded`	`boolean`	Optional.	`true` or `false`. (Default is `false`)
`logo`	`string`	Optional.	image `URL` or react `image` component
`subHeader`	`string`	Optional.	`text`
`desc`	`string`	Optional.	`text`
`link`	`string`	Optional.	`URL`
`sublink`	`string`	Optional.	`URL`
`descLink`	`string`	Optional.	`URL`

<TreeHeader>

Prop	Type	Description	Value
`header`	`string`	Required.	`text`
`logo`	`string`	Optional.	image `URL` or react `image` component
`subHeader`	`string`	Optional.	`text`
`desc`	`string`	Optional.	`text`
`link`	`string`	Optional.	`URL`
`sublink`	`string`	Optional.	`URL`
`descLink`	`string`	Optional.	`URL`
`headerVarient`	`string`	Optional.	`h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`. (Default is `h1`)
`subHeaderVarient`	`string`	Optional.	`h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`. (Default is `h4`)
`descVarient`	`string`	Optional.	`h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`. (Default is `p`)
`headerColor`	`string`	Optional.	`white`, `black`, `primary`, `secondary`, `success`, `error`, `info` , `warning` or `mute`. (Default is `primary`)
`subHeaderColor`	`string`	Optional.	`white`, `black`, `primary`, `secondary`, `success`, `error`, `info` , `warning` or `mute`. (Default is `white`)
`descColor`	`string`	Optional.	`white`, `black`, `primary`, `secondary`, `success`, `error`, `info` , `warning` or `mute` . (Default is `mute`)

<TreeText>

Prop	Type	Description	Value
`text`	`string`	Required.	`text`
`varient`	`string`	Optional.	`h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`. (Default is `p`)
`color`	`string`	Optional.	`white`, `black`, `primary`, `secondary`, `success`, `error`, `info` , `warning` or `mute`. (Default is `white`)
`className`	`string`	Optional.	any

<TreeBadge>

Prop	Type	Description	Value
`label`	`string`	Required.	`text`
`img`	`string`	Optional.	image `URL` or react `image` component

<TreeLink>

Prop	Type	Description	Value
`href`	`string`	Required.	`URL`
`target`	`string`	Optional.	`_blank`, `_self`, `_parent`, or `_top`. (Default is `_blank`)
`title`	`string`	Optional.	`text`
`iconColor`	`string`	Optional.	any `color code`
`className`	`string`	Optional.	any

<CirclePointer>

Prop	Type	Description	Value
`header`	`string`	Required.	`text`
`showMainConnector`	`boolean`	Optional.	`true` or `false`. (Default is `true`)
`setAsLast`	`boolean`	Optional.	`true` or `false`. (Default is `false`)

<DownArrow>

Prop	Type	Description	Value
`size`	`number`	Optional.	any number more than `0` (Default is `10`)
`color`	`string`	Optional.	any `Color Code` (Default is `#00f0ff`)
`className`	`string`	Optional.	any