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.

Licenses