README
React Modal
A classic modal overlay for React, in which you can include any content you want.
Table of contents
Installation
npm install --save shapla-react-modal
Usage
Styles
with Sass:
import 'shapla-react-modal/src/index.scss';
with CSS:
import 'shapla-react-modal/dist/modal.css';
Javascript Instantiation
import React from 'react';
import Modal from 'shapla-react-modal';
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = { showBoxModal: false }
this.openBoxModal = this.openBoxModal.bind(this);
this.closeBoxModal = this.closeBoxModal.bind(this);
}
openBoxModal() {
this.setState(state => state.showBoxModal = true);
}
closeBoxModal() {
this.setState(state => state.showBoxModal = false);
}
render() {
return (
<div>
<button onClick={this.openBoxModal}>Open Box Modal</button>
<Modal active={this.state.showBoxModal} type='box' onClose={this.closeBoxModal}>
Box modal only have white background, border radius and 1rem padding
</Modal>
</div>
);
}
}
Props
Property | Type | Required | Default | Description |
---|---|---|---|---|
active |
Boolean | yes | ||
title |
String | no | Untitled |
title will not show if you set type other than card |
type |
String | no | card |
Currently card and box design available. Use any name to get blank modal |
closeOnBackgroundClick |
Boolean | no | true |
If set true , clicking outside content area will trigger close event. |
showCloseIcon |
Boolean | no | true |
If set false , no closing icon will be shown |
contentSize |
String | no | medium |
Value can be small , medium , large or full . small has content width 320px, medium has content width 640px, large has content width 960px and full will take full browser width |
className |
String | no | `` | Custom CSS class |
children |
String | no | `` | Modal content |
footer |
String | no | `` | Modal footer content when using card design. |