shapla-react-modal v1.0.2

React Modal

A classic modal overlay for React, in which you can include any content you want.

Table of contents

• Installation
• Usage

Installation

npm install --save shapla-react-modal

Usage

Styles

with Sass:

import 'shapla-react-modal/src/index.scss';

with CSS:

import 'shapla-react-modal/dist/modal.css';

Javascript Instantiation

import React from 'react';
import Modal from 'shapla-react-modal';
 
class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showBoxModal: false }
    this.openBoxModal = this.openBoxModal.bind(this);
    this.closeBoxModal = this.closeBoxModal.bind(this);
  }

  openBoxModal() {
    this.setState(state => state.showBoxModal = true);
  }

  closeBoxModal() {
    this.setState(state => state.showBoxModal = false);
  }

  render() {
    return (
      <div>
        <button onClick={this.openBoxModal}>Open Box Modal</button>

        <Modal active={this.state.showBoxModal} type='box' onClose={this.closeBoxModal}>
          Box modal only have white background, border radius and 1rem padding
        </Modal>
      </div>
    );
  }
}

Props