React component placeholder

development-placeholder.js

// DO NOT USE THIS COMPONENT IN PRODUCTION

import React from 'react';

// Removes the need for `PropTypes`.
const { PropTypes } = React;

// The component name will be used as the `DisplayName` and exported along with
// the component itself.
export const COMPONENT = 'ComponentPlaceholder';

const ComponentPlaceholder = React.createClass({
	// ### Display Name
	// Always use the canonical component name as the React display name.
	displayName: COMPONENT,

	// ### Prop Types
	propTypes: {
		children: PropTypes.node,
		name: PropTypes.string,
		properties: PropTypes.string,
	},

	render () {
		const html = this.props.name || '<div>' + this.constructor.displayName + '</div>'
		// Intentionally going against conventional here: https://facebook.github.io/react/tips/dangerously-set-inner-html.html
		return (
			<div style={{padding: '10px', border: '1px #CCC solid'}}>
				<div dangerouslySetInnerHTML={{__html: html}}></div>
				<div>{this.props.properties}</div>
				{this.props.children}
			</div>
		);
	}
});

export default ComponentPlaceholder;