react-foundation-modal

This is a Simple Modal Dialog using foundation.

react-foundation-modal

Table of Contents

• Prerequisite
• Installation
• Props
• Examples

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);