react-blur-modals

A collection of beautiful mobile-friendly modals built with React, Framer Motion, and Tailwind CSS. Easily create stylish and interactive modals for your mobile applications.

Installation

To install react-blur-modals, you can use npm or yarn:

npm install react-blur-modals --save

or

yarn add react-blur-modals

Usage

import { ModalContent, ModalButton } from 'react-blur-modals';
import { useState } from 'react';

export default function Test() {
  const [modalOpen, setModalOpen] = useState(false);

  const handleModalToggle = () => {
    setModalOpen(!modalOpen);
  };

  return (
    <>
      <ModalButton text="Open Modal" backgroundColor="blue-600" onClick={handleModalToggle} />
      <ModalContent isOpen={modalOpen} onClose={handleModalToggle} closeButtonColor="blue-600" animationType="easeInOut" blurPx="10px">
        <h1>React Blur Modals</h1>
      </ModalContent>

      {/** 
      *     animationType parameter supports framer-motion animation types
      */}
    </>
  );
}

Props

ModalButton

| Prop | Type | Default | Description | |-------------------|----------|---------|---------------------------------------------| | text | string | | The text to display on the button | | backgroundColor | string | | The background color of the button | | onClick | function | | The function to be called on button click |

ModalContent

| Prop | Type | Default | Description | |-------------------|--------------------------|-----------|-------------------------------------------------------| | isOpen | boolean | | Controls whether the modal is open or closed | | onClose | function | | The function to be called when the modal is closed | | closeButtonColor | string | | The color of the close button | | animationType | string | easeInOut | The animation type for opening and closing the modal | | blurPx | string | "10px" | The amount of blur to apply to the modal background |

License

This project is licensed under the MIT License - see the LICENSE file for details.