react-zvui-modal
This inspired from a jQuery library jschr's bootstrap modal. A equivalent to Twitter Bootstrap's Modal component in a React friendly way.
Forked some of the basic implementations from the original Bootstrap team.
Features
- Stackable.
- Loading Animation.
- Switchable content while enabling modal.
- Easy props configuration.
Use
import ZvuiModal from 'react-zvui-modal';
class App extends Component {
state = {
open: false,
};
close = () => {
this.setState({
open: false,
})
};
open = () => {
this.setState({
open: true,
})
};
render = () => {
return (
<section
className="app">
<ZvuiModal
medium
show={this.state.open}
onHide={this.close}>
<ZvuiModal.Header closeButton outside>
<ZvuiModal.Title>
Hello There
</ZvuiModal.Title>
</ZvuiModal.Header>
<ZvuiModal.Body>
<p>I am here and doing awesome</p>
<p>I am here and doing awesome</p>
</ZvuiModal.Body>
</ZvuiModal>
<button
className='f6 link dim br3 ph3 pv2 mb2 dib white bg-black'
onClick={this.open}
>
Open Modal
</button>
</section>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
`` Styling You are free to use whatever styles you want inside the modal.
But for basic styles of the modal and wrappers please include the library css like so
import 'react-zvui-modal/build/react-zvui-modal.css';
import (less) './react-zvui-modal/build/react-zvui-modal.css';
Component
Props
-
show
: Boolean, defaultfalse
. -
small
,sm
,large
,lg
,full
: Boolean , defaultfalse
. -
backdrop
: Boolean or String, defaulttrue
. -
loader
: Boolean, should the modal show a loader. defaultfalse
. -
loadComplete
: Ifloader
istrue
then this needs to set totrue
for the Modal to show the content. defaultfalse
. -
keyboard
: Boolean. defaulttrue
. -
animate
: Boolean. defaulttrue
. -
transition
: componentOrElement. defaulttrue
. -
container
: componentOrElement or Function. defaultwindow
. -
onShow
: Function. defaultnull
. -
onHide
: Function. defaultnull
. -
onEnter
: Function. defaultnull
. -
onEntering
: Function. defaultnull
. -
onEntered
: Function. defaultnull
. -
onExit
: Function. defaultnull
. -
onExiting
: Function. defaultnull
. -
onExited
: Function. defaultnull
. -
modalPrefix
: String. defaultnull
. -
dialogClassName
: String. defaultnull
.
ZvuiModal.Title
This is a modal title component.
ZvuiModal.Body
This is a modal body component.