/react-modal

React Modal Component

Primary LanguageJavaScriptMIT LicenseMIT

react-modal

Description

React modal component

Installation

npm install @opuscapita/react-modal styled-components

Demo

View the DEMO

Change log

View the Change log

Migrate guide

View the Migrate guide between major versions

Builds

UMD

A build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

API

Modal

Prop name Type Default Description
id string oc-modal Component ID
className string oc-modal Component class
isOpen boolean true Is modal visible
width string 100% Modal width as CSS style
height string 100% Modal height as CSS style

Modal.Header

Prop name Type Default Description
id string oc-modal-header Component ID
className string oc-modal-header Component class

Modal.Body

Prop name Type Default Description
id string oc-modal-body Component ID
className string oc-modal-body Component class
isBorderVisible boolean false Show border around body area

Modal.Footer

Prop name Type Default Description
id string oc-modal-footer Component ID
className string oc-modal-footer Component class

Modal.ButtonContainer

Prop name Type Default Description
id string oc-modal-button-container Component ID
className string oc-modal-button-container Component class

Code example

import React from 'react';
import Modal from '@opuscapita/react-modal';

export default class ReactView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    };
  }

  toggleModal = () => {
    this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
  }

  render() {
    const { isOpen } = this.state;
    return (
      <div>
        <button type="button" onClick={this.toggleModal}>
          Open Modal
        </button>
        <Modal
          isOpen={isOpen}
        >
          <Modal.Header>
            Attention
          </Modal.Header>
          <Modal.Body>
            This is the example modal!
          </Modal.Body>
          <Modal.Footer>
            <Modal.ButtonContainer>
              <button type="button" onClick={this.toggleModal}>
                Close Modal
              </button>
            </Modal.ButtonContainer>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}