react-modal

Accessible modal dialog component for React.JS

MIT 116 个版本
react react-component modal dialog
主页
仓库
提交 Issue
安装
npm install react-modal
yarn add react-modal
pnpm add react-modal
bun add react-modal
README

react-modal

Accessible modal dialog component for React.JS

Build Status Coverage Status gzip size

Table of Contents

Installation

To install, you can use npm or yarn:

$ npm install --save react-modal
$ yarn add react-modal

To install react-modal in React CDN app:

  • Add this CDN script tag after React CDN scripts and before your JS files (for example from cdnjs):

       <script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.14.3/react-modal.min.js"
   integrity="sha512-MY2jfK3DBnVzdS2V8MXo5lRtr0mNRroUI9hoLVv2/yL3vrJTam3VzASuKQ96fLEpyYIT4a8o7YgtUs5lPjiLVQ=="
   crossorigin="anonymous"
   referrerpolicy="no-referrer"></script>

  • Use <ReactModal> tag inside your React CDN app.

API documentation

The primary documentation for react-modal is the reference book, which describes the API and gives examples of its usage.

Examples

Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:

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

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

// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement');

function App() {
  let subtitle;
  const [modalIsOpen, setIsOpen] = React.useState(false);

  function openModal() {
    setIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal}
        style={customStyles}
        contentLabel="Example Modal"
      >
        <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
        <button onClick={closeModal}>close</button>
        <div>I am a modal</div>
        <form>
          <input />
          <button>tab navigation</button>
          <button>stays</button>
          <button>inside</button>
          <button>the modal</button>
        </form>
      </Modal>
    </div>
  );
}

ReactDOM.render(<App />, appElement);

You can find more examples in the examples directory, which you can run in a local development server using npm start or yarn run start.

Demos

There are several demos hosted on CodePen which demonstrate various features of react-modal:

版本列表
3.16.3 2024-12-17
3.16.2 2024-12-17
3.16.1 2022-10-18
3.15.1 2022-04-27
3.14.4 2021-11-10
3.14.3 2021-06-15
3.14.2 2021-06-02
3.14.1 2021-06-02
3.13.1 2021-04-13
3.12.1 2020-11-23
3.11.2 2020-02-26
3.11.1 2019-10-26
3.10.1 2019-08-21
3.9.1 2019-07-14
3.8.2 2019-06-30
3.8.1 2018-12-19
3.7.1 2018-12-10
3.6.1 2018-09-25
3.5.1 2018-07-04
3.4.5 2018-06-01
3.4.4 2018-04-24
3.4.3 2018-04-24
3.4.2 2018-04-19
3.4.1 2018-04-17
3.3.2 2018-03-13
3.3.1 2018-02-21
3.2.1 2018-02-15
3.1.13 2018-02-09
3.1.12 2018-02-05
3.1.11 2018-01-16
3.1.10 2017-12-19
3.1.9 2017-12-19
3.1.8 2017-12-12
3.1.7 2017-12-04
3.1.6 2017-11-30
3.1.5 2017-11-27
3.1.4 2017-11-24
3.1.3 2017-11-22
3.1.2 2017-11-06
3.1.0 2017-10-25
3.0.4 2017-10-18
3.0.3 2017-10-14
3.0.2 2017-10-14
3.0.0-alpha 2017-10-04
3.0.0 2017-10-06
3.0.0-rc2 2017-10-04
3.0.0-rc1 2017-10-04
2.4.1 2017-10-06
2.3.3 2017-10-04
2.3.2 2017-09-06
2.3.1 2017-09-05
2.2.4 2017-08-14
2.2.3 2017-08-10
2.2.2 2017-07-11
2.2.1 2017-06-30
2.2.0 2017-06-28
2.1.0 2017-06-27
2.0.7 2017-06-25
2.0.6 2017-06-20
2.0.2 2017-06-16
2.0.1 2017-06-16
2.0.0 2017-06-15
1.9.7 2017-06-15
1.9.6 2017-06-15
1.9.5 2017-06-15
1.9.4 2017-06-13
1.9.3 2017-06-13
1.9.2 2017-06-13
1.9.1 2017-06-12
1.8.1 2017-06-12
1.7.13 2017-06-12
1.7.12 2017-06-10
1.7.11 2017-06-08
1.7.10 2017-06-08
1.7.9 2017-06-08
1.7.8 2017-06-08
1.7.7 2017-04-18
1.7.6 2017-04-13
1.7.5 2017-04-13
1.7.4 2017-04-13
1.7.3 2017-03-14
1.7.2 2017-03-09
1.7.1 2017-03-02
1.7.0 2017-03-02
1.6.5 2016-12-31
1.6.4 2016-12-15
1.6.3 2016-12-12
1.6.2 2016-12-11
1.6.1 2016-12-06
1.6.0 2016-12-06
1.5.2 2016-10-08
1.5.1 2016-10-08
1.5.0 2016-10-08
1.4.0 2016-06-30
1.3.0 2016-05-17
1.2.1 2016-04-23
1.2.0 2016-04-21
1.1.2 2016-04-19
1.1.1 2016-04-15
1.1.0 2016-04-12
1.0.0 2016-04-09
0.6.1 2015-10-23
0.6.0 2015-10-21
0.5.0 2015-09-22
0.3.0 2015-07-15
0.2.0 2015-05-09
0.1.1 2015-03-31
0.1.0 2015-02-26
0.0.7 2015-01-03
0.0.6 2014-12-03
0.0.5 2014-11-13
0.0.4 2014-11-11
0.0.3 2014-10-31
0.0.2 2014-09-25
0.0.1 2014-09-24
0.0.0 2014-09-24