react-modal-button v2.0.6

Installation

npm i --save react-modal-button

Example

Demo here - Codesandbox.io

Usage

import React from 'react';
import { ModalButton } from 'react-modal-button';

const App = () => (
  <div>
    <h1>React Modal Button!</h1>

    <ModalButton
      modal={({ closeModal }) => (
        <div>
          <p>My Modal</p>
          <button onClick={closeModal}>Close</button>
        </div>
      )}
    >
      Button Text Here 🐕
    </ModalButton>
  </div>
);

Props for content

Props on Button

Props for Modal

Custom Animation

modal-[your-animation-prop]-on-[enter/leave]

Control the modal with state

import { Modal } from 'react-modal-button';

class App extends Component {
  state = {
    isModalOpen: false,
  };

  openModal = () => {
    this.setState({ isModalOpen: true });
  };

  closeModal = () => {
    this.setState({ isModalOpen: false });
  };

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

        <Modal isOpen={this.state.isModalOpen} onClose={this.closeModal}>
          <div>Content</div>
          <button onClick={this.closeModal}>Close Modal</button>
        </Modal>
      </div>
    );
  }
}