Nougat Predominant Middleware

    react-dark-modal

    0.1.2 • Public • Published

    react-dark-modal

    Simple React modal component as a transparent dark overlay 🌑

    NPM

    Demo

    react-dark-modal gif demo

    🚀 Try react-dark-modal on CodeSandbox

    Install

    npm install --save react-dark-modal

    OR

    yarn add react-dark-modal

    Usage

    import React, { useState } from 'react';
    import { Modal } from 'react-dark-modal';
    import 'react-dark-modal/dist/index.css';
    
    const App = () => {
      const [isModalOpen, setIsModalOpen] = useState(false);
    
      const handleOpen = () => {
        setIsModalOpen(true);
      };
    
      const handleClose = () => {
        setIsModalOpen(false);
      };
    
      return (
        <>
          <button onClick={handleOpen}>Open the modal</button>
          <Modal open={isModalOpen} onClose={handleClose}>
            <h1>Click elsewhere to close the modal</h1>
          </Modal>
        </>
      );
    };
    
    export default App;

    License

    MIT © Yifan Ai

    Install

    npm i react-dark-modal

    DownloadsWeekly Downloads

    0

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    8.53 kB

    Total Files

    7

    Last publish

    Collaborators

    • yifanai