https://github.com/malcodeman/react-modal

The Modal component is used to show content on top of an overlay.
https://github.com/malcodeman/react-modal

headless hooks modal react react-modal

Last synced: about 1 month ago
JSON representation

The Modal component is used to show content on top of an overlay.

• Host: GitHub
• URL: https://github.com/malcodeman/react-modal
• Owner: malcodeman
• License: mit
• Created: 2020-05-11T14:32:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T05:43:09.000Z (about 2 years ago)
• Last Synced: 2024-11-28T16:53:03.095Z (about 1 month ago)
• Topics: headless, hooks, modal, react, react-modal
• Language: JavaScript
• Homepage: http://react-modal-storybook.surge.sh/?path=/story/*
• Size: 4.62 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-repos - react-modal - The Modal component is used to show content on top of an overlay. (Packages)

README

        
# [react-modal](http://react-modal-storybook.surge.sh)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/malcodeman/react-modal/blob/master/LICENSE)

[![npm](https://img.shields.io/npm/v/@malcodeman/react-modal)](https://www.npmjs.com/package/@malcodeman/react-modal)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

The Modal component is used to show content on top of an overlay. It blocks any interaction with the page — until the overlay is clicked, or a close action is triggered.

## Getting started

```sh

yarn add @malcodeman/react-modal

# or

npm install --save @malcodeman/react-modal

```

```jsx

import React from "react";

import { Modal } from "@malcodeman/react-modal";

function App() {

  const [isOpen, setIsOpen] = React.useState(false);

  function onClick() {

    setIsOpen(!isOpen);

  }

  function onClose() {

    setIsOpen(false);

  }

  return (

    <>

      Trigger Modal

      

        
Modal

      

    >

  );

}


export default App;

```

## License

[MIT](./LICENSE)