@optumation/react-components v1.0.1
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 statetoggleSidebar: (toggled?: boolean) => void
: A function that enables you to update the sidebar's toggled statecollapsed: boolean
: Sidebar collapsed statetoggled: boolean
: Sidebar toggled statebroken: boolean
: Sidebar breakPoint statertl: 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
License
MIT © Christopher Obigho