@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>
  );
}

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

<LinkIcon>

Prop	Type	Description	Value
color	string	Optional.	any Color Code (Default is #00f0ff)
className	string	Optional.	any

<TreeLiner>

Prop	Type	Description	Value
color	string	Optional.	any Color Code (Default is rgba(0, 240, 255, 0.502))

Tech Stack

Client: React, Typescript, CSS

Author

• @adeeshaashinshana

License

MIT