@opuscapita/react-modal v0.1.0

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.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

Modal

Modal.Header

Modal.Body

Modal.Footer

Modal.ButtonContainer

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>
    );
  }
}