react-customizable-modal

react-customizable-modal

Customizable Modal component for React

Features

• Fancy styled modal
• Mobile Support

Usage

• Install via NPM

$ npm install --save-dev react-customizable-modal

• Load to browser(need web bundler, such as Webpack or Browserify, also need to plugin to load CSS. Else, you have to load css from HTML)

// CommonJS
require('react-customizable-modal/style.css');
var Modal = require('react-customizable-modal');

// ES2015 Modular Syntax
import 'react-customizable-modal/style.css';
import Modal from 'react-customizable-modal';

Example

Above examples can found here: https://github.com/rico345100/react-customizable-modal-example.

Simple Modal

Example for creating simple custom modal:

import 'react-customizable-modal/style.css';
import Modal from 'react-customizable-modal';

class CustomModal extends Component {
	static propTypes = {
		visible: PropTypes.bool.isRequired,
		onClose: PropTypes.func
	}
	static defaultProps = {
		onClose: () => {}
	}
	render() {
		return (
			<Modal name="Custom Modal" visible={this.props.visible} onSubmit={this.props.onClose} onClose={this.props.onClose}>
				<h1>Helloworld!</h1>
			</Modal>
		)
	}
}

class App extends Component {
	state = {
		showModal: false
	}
	toggleModal = () => {
		this.setState({ showModal: !this.state.showModal });
	}
	closeModal = () => {
		this.setState({ showModal: false });
	}
	render() {
		return (
			<div>
				<h1>Modal Test</h1>
				<button onClick={this.toggleModal}>Toggle</button>

				{/* Modal must be render always, and control visiblity via visible props */}
				<CustomModal visible={this.state.showModal} onClose={this.closeModal} />
			</div>
		);
	}
}

Form Modal

Example for creating custom modal has form(using with react-bootstrap):

import React, { Component, PropTypes } from 'react';
import { FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
import Modal from 'react-customizable-modal';

class AddAccountModal extends Component {
	static propTypes = {
		onClose: PropTypes.func,
		visible: PropTypes.bool.isRequired
	}
	state = {
		name: '',
		age: ''
	}
	onAdd = () => {
		console.log('Add: ', this.state);
	}
	onClose = () => {
		this.props.onClose();
	}
	handleChange(key, ev) {
		this.setState({
			[key]: ev.target.value
		});
	}
	render() {
		const { visible } = this.props;
		const { name, age } = this.state;

		return (
			<Modal name="Add Account" onSubmit={this.onAdd} onClose={this.onClose} submitText="Add" closeText="Close" visible={visible}>
				<div className="form-horizontal">
					<FormGroup>
						<ControlLabel>Name</ControlLabel>
						<FormControl type="text" value={name} onChange={this.handleChange.bind(this, 'name')} />
					</FormGroup>

					<FormGroup>
						<ControlLabel>Age</ControlLabel>
						<FormControl type="text" value={age} onChange={this.handleChange.bind(this, 'age')} />
					</FormGroup>
				</div>
			</Modal>
		);
	}
}

export default AddAccountModal;

API

props

• string name: Name of the modal. It displays both Desktop and Mobile device.
• boolean visible: Set visibility. This is using when animate modal on show/hide.
• optional number zIndex: Z-Index of modal component. This is useful when you want to make some kind of nested modals with right order.
• optional string className: Add class.
• optional function onSubmit: Invoked when submit the form.
• optional function onClose: Invoked when close the form.
• optional boolean noSubmit: On true, no submit button in the modal. Default is false.
• optional string submitText: Text on the submit button. Default is "Submit".
• optional string closeText: Text on the close button. Default is "Close".

License

MIT. Free to use.