@tmnrp/react-sidebar
@tmnrp/react-sidebar is a lightweight latest treanding markup to display the sidebar.
Features
- Configurable html attributes with ease.
link
Exampleshttps://tmnrp-react-ui.vercel.app/sidebar
link
Installation$ npm i @tmnrp/react-sidebar
Properties
@tmnrp/react-sidebar (ISidebar) is currently extended with the following properties.
Properties | type | Description |
---|---|---|
isExpanded | boolean | Default theme value to start with. |
isExpandedWidth? | string , number , undefined | Renderable children receives theme as parameter. |
...props | HTML div props | Common HTML div properties that needs to be applied to the sidebar. |
Implementation
import { useSidebar, SidebarToggler, Sidebar } from "@tmnrp/react-sidebar";
const App = () => {
const { isExpanded, toggle } = useSidebar();
//
return (
<div className="pb-2 border-b dark:border-b-gray-800">
<div>
<SidebarToggler
isExpanded={isExpanded}
toggle={toggle}
isExpandedIcon={<GoogleMaterialIcons iconName="menu_open" />}
isCollapsedIcon={<GoogleMaterialIcons iconName="menu" />}
/>
</div>
<div>
<Sidebar
className="whitespace-nowrap"
isExpanded={isExpanded}
isExpandedWidth={`100%`}
>
<div>This is side bar</div>
<div>lorem20</div>
</Sidebar>
</div>
</div>
);
};
Todos
- Let me know :-)
License
MIT Tony Martin