@edonec/sidebar NPM

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;