cp-popup-modal-test v0.1.9

Modal Snippet information

This is npm package which is providing custom hook and ready to use prepared modal component which includes accept the following properties.

• title (required) - The title text content of the modal

• isShowing (required) - It control whether the modal is shown.
  (It should come from the custom hook in the most cases)

• toggle (required) - Function which set the state of isShowing property.
  (It should come from the custom hook in the most cases)

• closeButtonText (optional) - If you want the modal to have close button, you must add this property and specify its text content

• saveButtonText (optional) - If you want the modal to have save button, you must add this property and specify its text content

• size (optional) - It set the size of the modal.

• onSave (optional) - Function which you can provide to change the save button logic, which default functionality is closing the modal.

Custom Hook
Hook which returns isShowing state variable and toggle function which controls the value of it.

Peer dependencies must be installed manually

• @mui/icons-material
• @mui/material
• @emotion/styled

Usage examples

• Alert only example

import { Modal, useModal } from 'cp-modal';

function alertExample() {
  const { isShowing: showMyModal, toggle: toggleMyModal } = useModal(false);

  return (
    <div>
      <Modal title='Modal title' isShowing={showMyModal} toggle={toggleMyModal}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae
        tellus leo. Vivamus eget metus a ante aliquam cursus vehicula ac ligula.
      </Modal>

      <button onClick={toggleMyModal}>Click me</button>
    </div>
  );
}

• Save usage example

import { Modal, useModal } from 'cp-modal';

function App() {
  const { isShowing: showMyModal, toggle: toggleMyModal } = useModal(false);

  const onSaveLogicExample = () => {
    const request = {
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
      },
    };

    fetch(`https://book-library.thepineslab.net/authors`, request).then(
      (response) => {
        if (!response.ok) {
          throw new Error(response.statusText);
        }

        console.log(response.json());
        toggleMyModal();
      }
    );
  };

  return (
    <div className='App'>
      <Modal
        closeButtonText='Close me'
        saveButtonText='Save me'
        title='Modal title'
        isShowing={showMyModal}
        toggle={toggleMyModal}
        onSave={() => onSaveLogicExample()}
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae
        tellus leo. Vivamus eget metus a ante aliquam cursus vehicula ac ligula.
      </Modal>

      <button onClick={toggleMyModal}>Click me</button>
    </div>
  );
}