useModal

useModal hook. Use with the modal 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 { useModal } from @motor-js/core
//...
const {isShowing, toggle} = useModal();

Sample Syntax

useModal configuration

import React from "react";
import { useModal, Modal } from "@motor-js/core";
function ModalObject() {
{
const { isShowing, toggle } = useModal()
return (
<>
<Motor config={config}>
<Modal
header={
<div style={{ fontSize: '20px', fontWeight: 'bold' }}>
Modal Title
</div>
}
footer={
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button width="100px" onClick={toggle}>
Close
</Button>
</div>
}
isShowing={isShowing}
>
Modal Content, like some filters...
</Modal>
<Button onClick={toggle}>Show Modal</Button>
</Motor>
</>
)
}
export default ModalObject;
......
/>

Example

A simple sideBar example

Simple Modal

Render a simple Modal

function ModalDemo() {
const { isShowing, toggle } = useModal();
return (
<Motor config={config}>
<Modal
header={
<div style={{ fontSize: "20px", fontWeight: "bold" }}>
Modal Title
</div>
}
footer={
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<Button width="100px" onClick={toggle}>
Close
</Button>
</div>
}
isShowing={isShowing}
>
<div style={{ display: "flex", height: "50px", padding: "20px 0px" }}>
<Filter
label="Product Sub Group"
dimension={["Product Sub Group Desc"]}
size="small"
/>
</div>
</Modal>
<Button onClick={toggle}>Show Modal</Button>
</Motor>
);
}