Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-modal

Package Overview
Dependencies
Maintainers
1
Versions
114
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-modal

Accessible modal dialog component for React.JS

  • 3.0.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.5M
decreased by-12.46%
Maintainers
1
Weekly downloads
 
Created

What is react-modal?

The react-modal npm package is a library that provides accessible modal dialog components for React applications. It allows developers to create and manage modals in an accessible way, following the WAI-ARIA guidelines for modality. The package offers features such as locking the background scroll when a modal is open, setting the app element, and customizing styles and behaviors of the modal.

What are react-modal's main functionalities?

Basic Modal Usage

This code demonstrates how to create a basic modal using react-modal. It includes a button to open the modal and a button inside the modal to close it.

{"import React, { useState } from 'react';\nimport Modal from 'react-modal';\n\nconst App = () => {\n  const [modalIsOpen, setModalIsOpen] = useState(false);\n\n  function openModal() {\n    setModalIsOpen(true);\n  }\n\n  function closeModal() {\n    setModalIsOpen(false);\n  }\n\n  return (\n    <div>\n      <button onClick={openModal}>Open Modal</button>\n      <Modal\n        isOpen={modalIsOpen}\n        onRequestClose={closeModal}\n        contentLabel='Example Modal'\n      >\n        <h2>Hello</h2>\n        <button onClick={closeModal}>close</button>\n        <div>I am a modal</div>\n      </Modal>\n    </div>\n  );\n};\n\nexport default App;"}

Custom Styles

This code snippet shows how to apply custom styles to a modal using the 'style' prop.

{"import React from 'react';\nimport Modal from 'react-modal';\n\nconst customStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    transform: 'translate(-50%, -50%)'\n  }\n};\n\nconst App = () => {\n  return (\n    <Modal\n      isOpen={true}\n      style={customStyles}\n      contentLabel='Example Modal'\n    >\n      <h2>Hello</h2>\n      <button>close</button>\n      <div>I am a modal with custom styles</div>\n    </Modal>\n  );\n};\n\nexport default App;"}

Accessibility Features

This example demonstrates how to enhance the accessibility of a modal by setting the app element and using ARIA attributes.

{"import React from 'react';\nimport Modal from 'react-modal';\n\nModal.setAppElement('#yourAppElement');\n\nconst App = () => {\n  return (\n    <Modal\n      isOpen={true}\n      aria={{\n        labelledby: 'heading',\n        describedby: 'full_description'\n      }}\n      contentLabel='Accessible Example Modal'\n    >\n      <h2 id='heading'>Hello</h2>\n      <div id='full_description'>I am an accessible modal</div>\n      <button>close</button>\n    </Modal>\n  );\n};\n\nexport default App;"}

Other packages similar to react-modal

Keywords

FAQs

Package last updated on 14 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc