Newly Potted Mandrakes

    gat-react-responsive-modal

    2.1.2 • Public • Published

    react-responsive-modal

    npm version npm Build Status dependencies Status

    A simple responsive react modal compatible with React 15 and 16.

    • Centered modals.
    • Scrolling modals.
    • Multiple modals.
    • Easily customizable via props.

    Demo

    You can find a demo here.

    Examples

    https://react-responsive-modal.leopradel.com/#example

    Installation

    With npm: npm install react-responsive-modal --save

    Or with yarn: yarn add react-responsive-modal

    Usage

    Edit react-responsive-modal

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Modal from 'react-responsive-modal';
     
    export default class App extends React.Component {
      state = {
        open: false,
      };
     
      onOpenModal = () => {
        this.setState({ open: true });
      };
     
      onCloseModal = () => {
        this.setState({ open: false });
      };
     
      render() {
        const { open } = this.state;
        return (
          <div>
            <button onClick={this.onOpenModal}>Open modal</button>
            <Modal open={open} onClose={this.onCloseModal} little>
              <h2>Simple centered modal</h2>
            </Modal>
          </div>
        );
      }
    }
     
    ReactDOM.render(<App />, document.getElementById('app'));

    Usage with css

    By default react-responsive-modal is using react-jss.

    If you don't want to add it to your project you can use the css version of this project:

    // Import the css file
    import 'react-responsive-modal/lib/react-responsive-modal.css';
    import Modal from 'react-responsive-modal/lib/css';

    Props

    Property Type Default Description
    open* Boolean Control if the modal is open or not.
    onClose* Function Fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
    children Node The content of the modal.
    closeOnEsc Boolean true Is the modal closable when user press esc key.
    closeOnOverlayClick Boolean true Is the modal closable when user click on overlay.
    little Boolean false Is the dialog centered (when you don't have a lot of content).
    showCloseIcon Boolean true Show the close icon.
    closeIconSize Number 28 Close icon size.
    closeIconSvgPath Node A valid svg path to show as icon.
    classNames Object {} An object containing classNames to style the modal, can have properties 'overlay' (classname for overlay div), 'modal' (classname for modal content div), 'closeIcon' (classname for close icon svg). You can customize the transition with 'transitionEnter', 'transitionEnterActive', 'transitionExit', 'transitionExitActive'
    styles Object {} An object containing the styles objects to style the modal, can have properties 'overlay', 'modal', 'closeIcon'.
    animationDuration Number 500 Animation duration in milliseconds.

    License

    MIT © Léo Pradel

    Install

    npm i gat-react-responsive-modal

    DownloadsWeekly Downloads

    0

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    573 kB

    Total Files

    30

    Last publish

    Collaborators

    • peter.lazzarino