useModal

A custom React Hook for creating a modal with smooth animations using styled-components.

Installation

npm install my-modal-jeremyyyy

Usage

import React from 'react';
import useModal from 'my-modal-jeremyyyy';

const App = () => {
  const { modalOpen, closeModal, openModal, Modal } = useModal(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal modalOpen={modalOpen}>
        <h2>Your Modal Content</h2>
        <button onClick={closeModal}>Close Modal</button>
      </Modal>
    </div>
  );
};

API

useModal(initValue: boolean)

The useModal hook takes an initial value (true or false) to set the modal's initial state.

It returns an object with the following properties:

• modalOpen: A boolean value representing the current state of the modal (open or closed).
• closeModal: A function to close the modal.
• openModal: A function to open the modal.
• Modal: A React component that wraps your modal content and applies the required styles and animations.

<Modal modalOpen={boolean}> The Modal component takes a modalOpen prop, which should be the value of the modalOpen state returned from the useModal hook. This prop is used to control the opening and closing animations of the modal.

Wrap your modal content inside the Modal component.

Animations

This hook uses styled-components and CSS keyframes to create smooth animations for opening and closing the modal. The modal backdrop fades in/out, and the modal content slides up/down.

Styling

The default styling for the modal is provided by styled-components. You can easily customize the styles by modifying the ModalBackDrop and ModalContent styled components in the source code.

Dependencies

This package depends on:

• react
• styled-components

Make sure to have them installed in your project.