cp-modal v1.0.1

Getting started with CP Modal for React

This guide explains how to set up your React project to begin using CP Modal. It includes information on installing and usage examples of CP Modal.

If you are new to React or getting started with a new React application, see React's full Getting Started Guide.

For existing applications, follow the steps below to begin using CP Modal.

1. Install CP Modal

To install CP Modal type following command in your project's terminal:

npm install cp-modal

This will add project dependencies to package.json.

2. Modal information

This npm package is providing custom hook and ready to use modal component accepting the following properties:

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

• isShowing (required) - Boolean controlling whether the modal is shown.

• toggle (required) - Function which set the state of isShowing property.

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

• onSave (optional) - An object including 3 parameters needed for setting up the save functionality. It accepts:

  • onSaveFunc - The modal save logic.

  • closeButtonText - The close button text content

  • saveButtonText - The save button text content

useModal hook
Hook which returns isShowing state variable and a toggle function controlling its value.

import { useState } from 'react';

interface UseModalReturn {
  isShowing: boolean;
  toggle: () => void;
}

export const useModal = (showCondition?: boolean): UseModalReturn => {
  const [isShowing, setIsShowing] = useState(showCondition || false);

  const toggle = () => {
    setIsShowing(!isShowing);
  };

  return {
    isShowing,
    toggle,
  };
};

3. 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://example.com`, request).then((response) => {
      if (!response.ok) {
        throw new Error(response.statusText);
      }

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

  return (
    <div className='App'>
      <Modal
        title='Modal title'
        isShowing={showMyModal}
        toggle={toggleMyModal}
        onSave={{
          onSaveFunc: () => {},
          saveButtonText: 'On save button text',
          closeButtonText: 'Close button text',
        }}
      >
        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>
  );
}

Test your application
Run your local dev server:

npm start

Then point your browser to http://localhost:3000.

You can navigate to your CP Modal component to see it in action.