3.16.1 • Published 1 year ago

react-modal v3.16.1

Weekly downloads
1,214,960
License
MIT
Repository
github
Last release
1 year ago

react-modal

NOTE

Need feedback to push a new version of react-modal forward. See issue #881.

Accessible modal dialog component for React.JS

Build Status Coverage Status gzip size Join the chat at https://gitter.im/react-modal/Lobby

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:

@bidalgo/ui-kit@sprucelabs/react-heartwood-components@jetshop/template-trend@invisionag/components@seed-ui/elements@poofcash/use-contractkit@dterekhova/componentsbehtarino@globalsoftba/bede-starterkitdubase-table@mdn/yari@axa-ch/pod-kmu-20@lintondev/ui-kitmindee-sdk-react@foodles/ui-componentscarbon-addons-boomerang-reactbambus-components2cf-storybook@podiumhq/podium-uichorus-componentspwa-fedezign-systemno-commonui-x-librarygray-react-toolswl-ui-componentsgraphql-playground-react-authvijaybabusampleeditor@qred/ui-componentstraffic_2018_bgutraffic_bgu_2018@jayellul/gatsby-theme-craftcmsdynos.viewer.componentorejime-rgpd-patchtcms-flowtutoriallib@motive.io/core-ui@cognite/cogs.jsnikita-test-uinikita-test-uip@open-raven/react-styleguideinternal-dash-ml-tools@hi4s/richie-educationinternal-dash-user-portal@rsm/wl-ui-componentsclass-note-editor-modulevp-desktopelrond-connectleihuo-cloud-game-reactskilvul-web-components@miforix/uifrontend-ui-kitbonhams-signup-widgetnfg-frontend-ui-kitmircoai-guikenshoo-sharedinsync-stageplayermarin-stageplayerchattingappxr3-spokexrchat-spokejp-ui-kitcbi-packagejpms-ui-kit@longroad/usercentrics-clientdtrf_formsimple-modal-provideraqualist-components@custiv/design-system@techsbcn/storybook-designimiassist-agentobake-editorlib-liberty-v-01lib-liberty-v-02lib-liberty-v-03lib-liberty-versionlibrary-liberty-version-0.0.1library-liberty-version-1.1.2package-test06scratch-gui-freerangecomponents-alkdfja@epignosis_llc/gnosis1@beseda/uipuil3.0ur-ui-kit-test-1ur-ui-kit-test-2beebee-ate-clientjson-inspector-helperlean-link-web-sdkreactfaberreis-integrations@healform/ui-libraryclub-design-systemstaking_2.0stadtenergieabyss-uiwhitebrick@upandgo/micro-learninggatsby-theme-whitebrickgrossjs
3.16.1

1 year ago

3.15.1

2 years ago

3.14.4

2 years ago

3.14.3

3 years ago

3.14.1

3 years ago

3.14.2

3 years ago

3.13.1

3 years ago

3.12.1

3 years ago

3.11.2

4 years ago

3.11.1

4 years ago

3.10.1

5 years ago

3.9.1

5 years ago

3.8.2

5 years ago

3.8.1

5 years ago

3.7.1

5 years ago

3.6.1

6 years ago

3.5.1

6 years ago

3.4.5

6 years ago

3.4.4

6 years ago

3.4.3

6 years ago

3.4.2

6 years ago

3.4.1

6 years ago

3.3.2

6 years ago

3.3.1

6 years ago

3.2.1

6 years ago

3.1.13

6 years ago

3.1.12

6 years ago

3.1.11

6 years ago

3.1.10

6 years ago

3.1.9

6 years ago

3.1.8

6 years ago

3.1.7

6 years ago

3.1.6

6 years ago

3.1.5

6 years ago

3.1.4

6 years ago

3.1.3

6 years ago

3.1.2

6 years ago

3.1.0

6 years ago

3.0.4

6 years ago

3.0.3

6 years ago

3.0.2

6 years ago

3.0.0

6 years ago

2.4.1

6 years ago

3.0.0-rc2

6 years ago

3.0.0-rc1

6 years ago

3.0.0-alpha

6 years ago

2.3.3

6 years ago

2.3.2

7 years ago

2.3.1

7 years ago

2.2.4

7 years ago

2.2.3

7 years ago

2.2.2

7 years ago

2.2.1

7 years ago

2.2.0

7 years ago

2.1.0

7 years ago

2.0.7

7 years ago

2.0.6

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.9.7

7 years ago

1.9.6

7 years ago

1.9.5

7 years ago

1.9.4

7 years ago

1.9.3

7 years ago

1.9.2

7 years ago

1.9.1

7 years ago

1.8.1

7 years ago

1.7.13

7 years ago

1.7.12

7 years ago

1.7.11

7 years ago

1.7.10

7 years ago

1.7.9

7 years ago

1.7.8

7 years ago

1.7.7

7 years ago

1.7.6

7 years ago

1.7.5

7 years ago

1.7.4

7 years ago

1.7.3

7 years ago

1.7.2

7 years ago

1.7.1

7 years ago

1.7.0

7 years ago

1.6.5

7 years ago

1.6.4

7 years ago

1.6.3

7 years ago

1.6.2

7 years ago

1.6.1

7 years ago

1.6.0

7 years ago

1.5.2

7 years ago

1.5.1

7 years ago

1.5.0

7 years ago

1.4.0

8 years ago

1.3.0

8 years ago

1.2.1

8 years ago

1.2.0

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.0

8 years ago

0.6.1

8 years ago

0.6.0

8 years ago

0.5.0

9 years ago

0.3.0

9 years ago

0.2.0

9 years ago

0.1.1

9 years ago

0.1.0

9 years ago

0.0.7

9 years ago

0.0.6

9 years ago

0.0.5

9 years ago

0.0.4

9 years ago

0.0.3

9 years ago

0.0.2

10 years ago

0.0.1

10 years ago

0.0.0

10 years ago