Humble-modal NPM

humble-modal

A React simple, humble and easy to use modal. No fancy props or behaviors.

Instalation

NPM:

npm install --save-dev humble-modal

Usage

import Modal from 'humble-modal';

render() {
  return(
    <Modal show={this.state.show} onRequestClose={this.closeModal}>
      <span>Content inside the modal</span>
    </Modal>
  );
}

Props

Prop	Type	Required	Default
show	boolean	true
onRequestClose	function	true
title	string	false	""
noHeader	boolean	false	false
titleStyle	object	false
backgroundStyle	object	false
modalWindowStyle	object	false
headerStyle	object	false
contentStyle	object	false

Full Example

import React, { Component } from 'react';
import Modal from 'humble-modal';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      show: false
    }
  }

  openModal(e) {
    e.preventDefault();
    this.setState({ show: true });
  }

  onRequestClose(e) {
    e.preventDefault();
    this.setState({ show: false });
  }

  render() {
    return (
      <div>
        <p>
          <button onClick={this.openModal.bind(this)}>Open Modal</button>
        </p>
        <Modal
          show={this.state.show}
          onRequestClose={this.onRequestClose.bind(this)}
          title="This is a humble modal"
        >
          <div>Testing this simple modal</div>
        </Modal>
      </div>
    );
  }
}

export default App;