@optumation/react-components

optumation

Component Library Automation for all major frameworks used at Optum / UHG.

structure

Components React Components Stencil

Global Sidebar

Global Sidebar provides a set of components for creating high level and customizable side navigation

Installation

yarn

yarn add global-sidebar

npm

npm install global-sidebar

Usage

First you need to make sure that your components are wrapped within a <GlobalSidebarProvider> component

import { GlobalSidebarProvider } from 'global-sidebar';

<GlobalSidebarProvider>
  <App />
</GlobalSidebarProvider>;

Then in your layout component you can add sidebar navigation

import { Sidebar, Menu, MenuItem, SubMenu } from 'global-sidebar';

<Sidebar>
  <Menu>
    <SubMenu label="Charts">
      <MenuItem> Pie charts </MenuItem>
      <MenuItem> Line charts </MenuItem>
    </SubMenu>
    <MenuItem> Documentation </MenuItem>
    <MenuItem> Calendar </MenuItem>
  </Menu>
</Sidebar>;

Hook

The library comes with a useGlobalSidebar hook that lets you access and manage sidebar state

API

const { collapseSidebar, toggleSidebar, collapsed, toggled, broken, rtl } = useGlobalSidebar();

Returns

• collapseSidebar: (collapsed?: boolean) => void : A function that enables you to update the sidebar's collapsed state

• toggleSidebar: (toggled?: boolean) => void : A function that enables you to update the sidebar's toggled state

• collapsed: boolean : Sidebar collapsed state

• toggled: boolean : Sidebar toggled state

• broken: boolean : Sidebar breakPoint state

• rtl: boolean : Sidebar direction state

Example Usage

import { Sidebar, Menu, MenuItem, useGlobalSidebar } from 'global-sidebar';

function Layout() {
  const { collapseSidebar } = useGlobalSidebar();

  return (
    <div style={{ display: 'flex', height: '100%' }}>
      <Sidebar>
        <Menu>
          <MenuItem> Documentation</MenuItem>
          <MenuItem> Calendar</MenuItem>
          <MenuItem> E-commerce</MenuItem>
        </Menu>
      </Sidebar>
      <main>
        <button onClick={() => collapseSidebar()}>Collapse</button>
      </main>
    </div>
  );
}

Using React Router

It supports React Router using routerLink prop

Example Usage

import { Sidebar, Menu, MenuItem } from 'global-sidebar';
import { Link } from 'react-router-dom';

<Sidebar>
  <Menu>
    <MenuItem routerLink={<Link to="/documentation" />}> Documentation</MenuItem>
    <MenuItem routerLink={<Link to="/calendar" />}> Calendar</MenuItem>
    <MenuItem routerLink={<Link to="/e-commerce" />}> E-commerce</MenuItem>
  </Menu>
</Sidebar>;

API

Component	Prop	Type	Description	Default
Sidebar	defaultCollapsed	boolean	Initial collapsed status	false
	width	number | string	Width of the sidebar	270px
	collapsedWidth	number | string	Width of the sidebar on collapsed state	80px
	backgroundColor	string	Set background color for sidebar	rgb(249, 249, 249, 0.7)
	image	string	Url of the image to use in the sidebar background, need to apply transparency to background color	-
	breakPoint	xs | sm | md | lg | xl | xxl | always	Set when the sidebar should trigger responsiveness behavior	-
	customBreakPoint	string	Set custom breakpoint value, this will override breakPoint prop	-
	transitionDuration	number	Duration for the transition in milliseconds to be used in collapse and toggle behavior	300
	overlayColor	string	Set overlay color	rgb(0, 0, 0, 0.3)
	rtl	boolean	RTL direction	false
Menu	closeOnClick	boolean	If true, submenu popper will close when clicking on MenuItem	false
	renderMenuItemStyles	(params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; }) => CSSObject	Render method for style customization on MenuItem and SubMenu components	-
	renderExpandIcon	(params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; open: boolean; }) => React.ReactNode	Render method for customizing submenu expand icon	-
MenuItem	icon	ReactNode	Icon for the menu item	-
	active	boolean	If true, the component is active	false
	disabled	boolean	If true, the component is disabled	-
	prefix	ReactNode	Add a prefix to the menuItem	-
	suffix	ReactNode	Add a suffix to the menuItem	-
	routerLink	React.ReactElement	React router Link or NavLink component that will be used to handle routing	-
SubMenu	label	string | ReactNode	Label for the submenu	-
	icon	ReactNode	Icon for submenu	-
	defaultOpen	boolean	Set if the submenu is open by default	false
	open	boolean	Set open value if you want to control the state	-
	active	boolean	If true, the component is active	false
	disabled	boolean	If true, the component is disabled	-
	prefix	ReactNode	Add a prefix to the submenu	-
	suffix	ReactNode	Add a suffix to the submenu	-
	onOpenChange	(open: boolean) => void	Callback function called when submenu state changes	-

License

MIT © Christopher Obigho