This is a lightweight stylish modal
meteor add patrickml:react-modal
####Theming
As of version 2.1 we have added theming
in order to allow for everyone to make their own style with this lightweight modal system.
In order to declare your theme just add a prop
to the <Modal />
component like so
<Modal
isOpen={ instance.state.isOpen }
close={ instance.closeModal }
title={ instance.props.title }
theme="flex-theme"
options={{
style : {
maxWidth : '300px'
}
}}
>
In order to create a theme simply start with these classes to your stylesheets
.flex-theme.md-modal {
.md-content {
.md-title {
}
.md-body {
form {
input[type="text"] {
}
}
button {
}
.md-footer {
.button {
}
}
}
}
}
An enclosed modal is one where the state is enclosed in the same component as the rendering of the modal. For this you can use the ReactModalMixin
provided with this package. A component with the ReactModalMixin
will inherit the state openModal
and the functions openModal
and closeModal
which set the state accordingly
EnclosedModal = React.createClass({
mixins : [ReactModalMixin],
render () {
return (
<div>
<button onClick={ this.openModal }>Open Enclosed Modal</button>
<Modal
isOpen={ this.state.isOpen }
close={ this.closeModal }
title="Demo Enclosed Modal">
<p>This modal and all of its functionality are enclosed in the 'EnclosedModal' loading the 'ReactModalMixin' which controls the open and closed state.</p>
<button onClick={ this.closeModal }>Click Here to Close</button>
</Modal>
</div>
);
}
});
A Controlled Modal is one that is controlled by a parent component and the properties are passed to the Modal via properties.
ControlledModal = React.createClass({
render () {
return (
<div>
<Modal
isOpen={ this.props.isOpen }
close={ this.props.closeModal }
title="Demo Controlled Modal">
<p>This modal is controlled by the parent component. It can be opened and closed by padding props to the component</p>
<button onClick={ this.props.closeModal }>Click Here to Close</button>
</Modal>
</div>
);
}
});
ModalPage = React.createClass({
getInitialState () {
return {
controlledModalOpen : false
};
},
openModal () {
this.setState({
controlledModalOpen : true
});
},
closeModal () {
this.setState({
controlledModalOpen : false
});
},
render () {
return (
<div>
<ControlledModal closeModal={ this.closeModal } isOpen={ this.state.controlledModalOpen } />
<button onClick={ this.openModal }>Open Controlled Modal</button>
</div>
);
}
});