React simple and humble modal easy to use.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
humble-modal.js
package-lock.json
package.json
webpack.config.js

README.md

humble-modal

npm version

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.