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;

Contribution

Please, create an issue and pull request.