useSidebar

useSidebar hook. Use with the Sidebar component#

Usage#

Hooks are a new addition in React. They let you use state and other React features without writing a class. To learn more abou hook in react please read : https://reactjs.org/docs/hooks-intro.html

The motivation for introducing hooks in React are:

It’s hard to reuse stateful logic between components
Complex components become hard to understand
Classes confuse both people and machines
Complex components become hard to understand

To solve these problems, Hooks let you use more of React’s features without classes.

We have tried to expose hooks used in the libary so that you can create your own visualisations if you wish.

import { useSidebar } from @motor-js/core
//...
const {isOpen, toggle} = useSidebar();

Sample Syntax#

useSidebar configuration#

import React from "react";
import { useSidebar, Sidebar } from "@motor-js/core";

function SideBarObject() {
  const {isOpen, toggle} = useSidebar();

 {
    return (
      <>
        <Motor
          config={config}>
          ...
          <Sidebar collapsable padding='100px 5px' isOpen={isOpen} onClose={toggle} backgroundColor='lightblue'>
            Sidebar Content
          </Sidebar>
          ...
        </Motor>
      </>
    )
  )
}

export default SideBarObject;

......
/>

Example#

A simple sideBar example

Simple sidebar#

Render a simple sidebar

function SideBarDemo() {
  const { isOpen, toggle } = useSidebar();
  return (
    <Motor config={config}>
      <div style={{ overflow: "hidden", height: "300px", width: "500px" }}>
        <Sidebar
          width="30%"
          collapsable
          direction="column"
          padding="15px 12px"
          isOpen={isOpen}
          onClose={toggle}
          backgroundColor="altGray1"
          justifyContent="top"
          border={{ color: "brand" }}
        >
          <Box direction="column" overflow="visible">
            <Box
              gridArea="header"
              border={{ side: "bottom", color: "brand" }}
              padding="0px 0px 10px 0px"
              direction="row"
              align="center"
              size="large"
              overflow="hidden"
            >
              <Button onClick={toggle} size={25}>
                Hide Sidebar
              </Button>
              Filters
            </Box>
            <Box
              direction="column"
              padding="0px 0px 0px 30px"
              overflow="visible"
            >
              {/** FILTERS */}
            </Box>
          </Box>
        </Sidebar>
        <Button onClick={toggle}>Show Sidebar</Button>
      </div>
    </Motor>
  );
}