@tg0/react-modal v1.2.12

tg0/react-modal

• Library npm: Click here

npm install @tg0/react-modal

yarn add @tg0/react-modal

To understand about the lib api, click here.

• Examples in codesandbox: Click here

    import { Modal, useModal } from '@tg0/react-modal';
  
    function App() {
      const modal = useModal();
      // or use, but not recommended!
      // const {state, handleOpen, handleClose, setState} = useModal(initalState: boolean);
  
      return (
        <div>
          <button onClick={() => modal.handleOpen()}>Open a modal</button>
          <Modal isOpen={modal.state}>
            <h1>Modal Content</h1>
  
            <button onClick={() => modal.handleClose()}>Close a modal</button>
          </Modal>
        </div>
      );
    }

About using Modal

isOpen: boolean: Checks if the modal is open or closed.

children?: React.ReactNode: To place any html inside the Modal tag.

containerTag?: React.HTMLAttributes<HTMLDivElement>: To customize the tag that encompasses the entire modal

The useModal(initalState: boolean) hook is responsible for managing the state of the modal, making handling the component easier. Start state using true or false inside parameters.

--> v.1.2.0 The hook returns an object that can, but doesn't need to be unstructured

// state: boolean --> Tells when the modal is active or inactive.
// handleOpen: () => void --> Makes the modal open.
// handleClose: () => void --> Makes the modal close.
// setState: () => void --> Set a modal state.

// Use it like this:
const modal = useModal(false);
console.log(modal.state);

// Not recommended!
// or use like that.
const {state} = useModal(false);
console.log(state);

• Note: I recommend giving descriptive names when using hook values.

  ---

  The lib uses styled-component for css.

  By default, the <Modal> component has this css:

  // Covers all modal
  export const Container = styled.div`
    position: fixed;
    top: 0;
    z-index: 4;
  
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
  `;

My name is Tiago Gonçalves, below I leave the links of my main networks in which I participate.