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>
  );
}