react-foundation-modal
This is a Simple Modal Dialog using foundation.
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)' ; Component { ; thisstate = modalIsOpen: false } { this; } { return <div> <p><button ="button" =>Click me for a modal</button></p> <Modal = = = ="large" = > <h1>Awesome I Have It</h1> <p ="lead">Your couch It is mine</p> <p> a cool paragraph that lives inside of an even cooler modal Wins!</p> <button ="button" ="button" = > Close </button> </Modal> </div> ; } ReactDOM;