react-foundation-modal

0.1.5 • Public • Published

react-foundation-modal

Build Status

This is a Simple Modal Dialog using foundation.

react-foundation-modal

Table of Contents

Prerequisite

Foundation: Install Foundation css to your application.

Installation

To install, you can use npm:

$ npm install react-foundation-modal

Props

Attribute Required Type description example
open required Boolean to show or hide the dialog false
isModal option Boolean to make the popup modal poup false
size option String to set modal size tiny, small, large, full
overlayStyle option Object to override overlay style -
revealStyle option Object to override modal style -
closeStyle option Object to override close button style -
closeModal required Function callback function to set modal open to false -

Examples

Here is a simple example of react-foundation-modal being used in an app with some all the options available.

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-foundation-modal';
 
const overlayStyle = {
    'backgroundColor': 'rgba(33,10,10,.45)'
    };
 
class App extends React.Component {
  constructor(){
        super();
        this.state = {
            modalIsOpen: false
        }
    }
    showPopup = (status) => {
        this.setState({
            modalIsOpen: status
        });
    }
 
  render() {
    return (
      <div>
        <p><button className="button" onClick={() => this.showPopup(true)}>Click me for a modal</button></p>
            <Modal 
                open={this.state.modalIsOpen}
                closeModal={this.showPopup}
                isModal={true}
                size="large"
                overlayStyle={overlayStyle} >
                <h1>Awesome. I Have It.</h1>
                <p className="lead">Your couch. It is mine.</p>
                <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
                <button className="button" type="button" onClick={() => this.showPopup(false)} >
                    Close
                </button>
            </Modal>  
      </div>
    );
  }
}
 
ReactDOM.render(<App />, appElement);

Package Sidebar

Install

npm i react-foundation-modal

Weekly Downloads

65

Version

0.1.5

License

MIT

Unpacked Size

13.7 kB

Total Files

9

Last publish

Collaborators

  • shallyin83