README
eDonec React Sidebar
A Sidebar ready to use for all projects
Installation Yarn
Install @edonec/sidebar
with yarn
yarn add @edonec/sidebar
Installation npm
Install @edonec/sidebar
with npm
npm install @edonec/sidebar
API Reference
Sidebar Component
<Sidebar />
Parameter | Type | Default | Required? |
---|---|---|---|
isOpenBydefault |
boolean |
false |
false |
hideToggleButton |
boolean |
false |
false |
forceIsClosed |
boolean |
false |
false |
forceIsOpen |
boolean |
false |
false |
primary |
string |
rgb(21, 3, 68) |
false |
secondary |
string |
white |
false |
positionToggle |
string |
calc(50% - 20px) |
false |
onIsOpenChange |
({ prevState, nextState }: { prevState: boolean; nextState: boolean }) => { prevState: boolean; nextState: boolean } |
undefined |
false |
children |
JSX.Element or JSX.Element[] |
undefined |
true |
SidebarLink component
<SidebarLink />
to: string; icon: string | React.ReactNode; title: string; primary?: string; secondary?: string;
Parameter | Type | Default | Required |
---|---|---|---|
to |
string |
undefined |
true |
icon |
string or React.ReactNode |
undefined |
false |
title |
string |
undefined |
true |
primary |
string |
Sidebar Component values |
false |
secondary |
string |
Sidebar Component values |
false |
Usage/Examples (Simple)
App.tsx
import React from 'react';
import Sidebar from './Sidebar';
import { SidebarSafeAreaView } from '@edonec/sidebar';
const App: React.FC = () => {
return (
<SidebarSafeAreaView>
<Sidebar />
<h1>Hello to the component with sidebar</h1>
</SidebarSafeAreaView>
);
};
export default App;
Sidebar.tsx
import Sidebar, { SidebarLink } from '@edonec/sidebar';
const SidebarExample = () => {
return (
<Sidebar>
<SidebarLink icon={<ion-icon name="home-outline"></ion-icon>} title="Home" to="/" />
<SidebarLink icon={<ion-icon name="help-outline"></ion-icon>} title="Help" to="/help" />
<SidebarLink
icon={<ion-icon name="lock-closed-outline"></ion-icon>}
title="Password"
to="/password"
/>
<SidebarLink
icon={<ion-icon name="log-out-outline"></ion-icon>}
title="Sign Out"
to="/log-out"
/>
</Sidebar>
);
};
export default SidebarExample;
ChangeLog
Record of all notable changes made to this project.
1.0.1 (30-7-2021)
Added :
- Responsive design support.