Use prop-types

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "useTabs": true
+}

package.json

@@ -22,6 +22,7 @@
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "prop-types": "^15.6.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-styleguidist": "^6.0.4",

src/components/Button.js

@@ -1,24 +1,24 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import s from './Button.css';
 
 /**
  * The only true button.
  */
-export default function Button({
-	color,
-	size,
-	children,
-}) {
+export default function Button({ color, size, children }) {
 	let styles = {
 		color,
 		fontSize: Button.sizes[size],
 	};
 
 	return (
-		<button className={s.root} style={styles}>{children}</button>
+		<button className={s.root} style={styles}>
+			{children}
+		</button>
 	);
 }
+
 Button.propTypes = {
 	/**
 	 * Button label.

src/components/Placeholder.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import s from './Placeholder.css';
 
@@ -7,7 +8,17 @@ import s from './Placeholder.css';
  */
 export default class Placeholder extends Component {
 	static propTypes = {
-		type: PropTypes.oneOf(['animal', 'bacon', 'beard', 'bear', 'cat', 'food', 'city', 'nature', 'people']),
+		type: PropTypes.oneOf([
+			'animal',
+			'bacon',
+			'beard',
+			'bear',
+			'cat',
+			'food',
+			'city',
+			'nature',
+			'people',
+		]),
 		width: PropTypes.number,
 		height: PropTypes.number,
 	};
@@ -36,8 +47,6 @@ export default class Placeholder extends Component {
 
 	render() {
 		let { width, height } = this.props;
-		return (
-			<img className={s.root} src={this.getImageUrl()} width={width} height={height} />
-		);
+		return <img className={s.root} src={this.getImageUrl()} width={width} height={height} />;
 	}
 }

src/components/PushButton.js

@@ -1,24 +1,24 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import s from './PushButton.css';
 
 /**
  * An example-less button.
  */
-export default function PushButton({
-	color,
-	size,
-	children,
-}) {
+export default function PushButton({ color, size, children }) {
 	let styles = {
 		color,
 		fontSize: PushButton.sizes[size],
 	};
 
 	return (
-		<button className={s.root} style={styles}>{children}</button>
+		<button className={s.root} style={styles}>
+			{children}
+		</button>
 	);
 }
+
 PushButton.propTypes = {
 	/**
 	 * PushButton label.

styleguide.config.js

@@ -1,19 +1,19 @@
 module.exports = {
-  title: "React Style Guide Example",
-  defaultExample: true,
-  webpackConfig: {
-    module: {
-      loaders: [
-        {
-          test: /\.jsx?$/,
-          exclude: /node_modules/,
-          loader: "babel-loader"
-        },
-        {
-          test: /\.css$/,
-          loader: "style-loader!css-loader?modules&importLoaders=1"
-        }
-      ]
-    }
-  }
+	title: 'React Style Guide Example',
+	defaultExample: true,
+	webpackConfig: {
+		module: {
+			loaders: [
+				{
+					test: /\.jsx?$/,
+					exclude: /node_modules/,
+					loader: 'babel-loader',
+				},
+				{
+					test: /\.css$/,
+					loader: 'style-loader!css-loader?modules&importLoaders=1',
+				},
+			],
+		},
+	},
 };