Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

humble-modal

1.3.0 • Public • Published

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.

install

npm i humble-modal

Downloadsweekly downloads

20

version

1.3.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar