@types/react-modal

What is @types/react-modal?

@types/react-modal provides TypeScript type definitions for the react-modal library, which is a popular library for creating accessible modal dialogs in React applications.

What are @types/react-modal's main functionalities?

Basic Modal Usage

This code demonstrates the basic usage of react-modal with TypeScript. It shows how to open and close a modal dialog.

import React from 'react';
import Modal from 'react-modal';

const App: React.FC = () => {
  const [modalIsOpen, setIsOpen] = React.useState(false);

  function openModal() {
    setIsOpen(true);
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
      >
        <h2>Hello</h2>
        <button onClick={closeModal}>close</button>
      </Modal>
    </div>
  );
};

export default App;

Custom Styles

This code demonstrates how to apply custom styles to the modal dialog using the style prop.

import React from 'react';
import Modal from 'react-modal';

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)'
  }
};

const App: React.FC = () => {
  const [modalIsOpen, setIsOpen] = React.useState(false);

  function openModal() {
    setIsOpen(true);
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        style={customStyles}
        contentLabel="Example Modal"
      >
        <h2>Hello</h2>
        <button onClick={closeModal}>close</button>
      </Modal>
    </div>
  );
};

export default App;

Accessibility Features

This code demonstrates how to set the app element for accessibility purposes, ensuring that screen readers can properly interact with the modal.

import React from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root');

const App: React.FC = () => {
  const [modalIsOpen, setIsOpen] = React.useState(false);

  function openModal() {
    setIsOpen(true);
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
      >
        <h2>Hello</h2>
        <button onClick={closeModal}>close</button>
      </Modal>
    </div>
  );
};

export default App;

Other packages similar to @types/react-modal

react-bootstrap

react-bootstrap provides a set of React components built using Bootstrap. It includes a Modal component that offers similar functionality to react-modal but with Bootstrap styling and additional features.

material-ui

material-ui is a popular React UI framework that includes a Dialog component. It provides a wide range of customization options and integrates well with the Material Design system.

semantic-ui-react

semantic-ui-react offers a collection of React components based on Semantic UI. It includes a Modal component that provides similar functionality to react-modal with Semantic UI styling.

README

Installation

npm install --save @types/react-modal

Summary

This package contains type definitions for react-modal (https://github.com/reactjs/react-modal).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-modal.

Additional Details

• Last updated: Fri, 15 Oct 2021 19:01:24 GMT
• Dependencies: @types/react
• Global values: ReactModal

Credits

These definitions were written by Rajab Shakirov, Drew Noakes, Thomas B Homburg, Tatu Tamminen, Uwe Wiemer, Peter Blazejewicz, Justin Powell, Juwan Wheatley, Nitzan Mousan, and dkrk.