Home

React Component Library - code4bones react UI

Components

Component	Description
TreeMenu	Navigation Menu Tree

react-c4b-ui

###Links

Change log

Install

$ npm install react-c4b-ui

Initial usage

	const ITEMS :  TreeMenuItem[] = [{ ... }]

	const ref = createRef<TreeMenuActions>();


	<TreeMenu
	   ref={ref}
	   items={ITEMS}
	   onClick={onClick} 
	/>

Properties

Propery name	Description	Signature
items[]	tree menu items array	TreeMenuItem[]
re	handle to TreeMenu methods	TreeMenuActions
onClick	item click handler	onClick?:(item:TreeMenuItem) => void
onToggle	collapse / expand	onToggle?:(id?:string,collapsed?:boolean) => void;
initialCollapsed	initial tree state	boolean
initialSelected	initial selected item	item's id : string
renderBadge	item click handler	(item:TreeMenuItem) => React.ReactElement
renderIcon	Left side element of item	onClick?:(item:TreeMenuItem) => void
renderGroupState	Group indicator	onClick?:(item:TreeMenuItem) => void
renderBadge	Right side element of item	onClick?:(item:TreeMenuItem) => void
theme	theme override class name	dark, light, custom name
classPrefix	container global prefix	string
enableRotate	Rotate collapse / expand	boolean

TreeMenuItem

    id:string;
    title:string | React.ReactElement;
    info?:string | React.ReactElement;
    icon?:React.ReactElement;
    badge?:string | React.ReactElement;
    disabled?:boolean;
    unselectable?:boolean;
    titleClass?:string;
    infoClass?:string;
    style?:React.CSSProperties;
    infoStyle?:React.CSSProperties;

TreeMenuActions ( use ref )

    enable:(id:string,disable?:boolean) => void;
    getItem:(id:string) => TreeMenuItem | null;
    collapse:(id:string,collapsed?:boolean) => void;
    select:(id:string) => void;

Sample

Sample available via storybook yarn storybook