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

Package Sidebar

Install

npm i react-dark-modal

Weekly Downloads

1

Version

0.1.2

License

MIT

Unpacked Size

8.53 kB

Total Files

7

Last publish

Collaborators

  • yifanai