React.createClass to React.Component and fixing react 15.5 deprecations

example/components/CodeSample.react.js

@@ -1,21 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Markdown from './Markdown';
 
 const START_STR = '/* example-start */';
 const END_STR = '/* example-end */';
 
-const CodeSample = React.createClass({
- propTypes: {
- lang: React.PropTypes.string,
- },
-
- getDefaultProps() {
- return {
- lang: 'jsx',
- };
- },
-
+class CodeSample extends React.Component {
  render() {
  // Strip out extraneous parts of the code.
  const code = this.props.children;
@@ -29,7 +20,16 @@ ${code.slice(startIndex, endIndex)}
  \`\`\``}
  </Markdown>
  );
- },
-});
+ }
+}
+
+CodeSample.propTypes = {
+ lang: PropTypes.string,
+};
+
+CodeSample.defaultProps = {
+ lang: 'jsx',
+};
+
 
 export default CodeSample;

example/components/ExampleSection.react.js

@@ -2,12 +2,14 @@ import React from 'react';
 
 import CodeSample from '../components/CodeSample';
 
-const ExampleSection = React.createClass({
- getInitialState() {
- return {
+class ExampleSection extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
  open: false,
  };
- },
+ }
 
  render() {
  const {children, code} = this.props;
@@ -33,7 +35,7 @@ const ExampleSection = React.createClass({
  {open ? <CodeSample>{code}</CodeSample> : null}
  </div>
  );
- },
-});
+ }
+}
 
 export default ExampleSection;

example/components/GithubStarsButton.react.js

@@ -3,11 +3,11 @@ import {findDOMNode} from 'react-dom';
 
 const AUTHOR_REPO = 'ericgio/react-bootstrap-typeahead';
 
-const GitHubStarsButton = React.createClass({
+class GitHubStarsButton extends React.Component {
  componentDidMount() {
  const node = findDOMNode(this);
  node.dataset.style = window.innerWidth > 480 ? 'mega': null;
- },
+ }
 
  render() {
  return (
@@ -21,7 +21,7 @@ const GitHubStarsButton = React.createClass({
  Star
  </a>
  );
- },
-});
+ }
+}
 
 export default GitHubStarsButton;

example/components/Markdown.react.js

@@ -2,7 +2,7 @@ import cx from 'classnames';
 import marked from 'marked';
 import React from 'react';
 
-const Markdown = React.createClass({
+class Markdown extends React.Component {
  componentWillMount() {
  marked.setOptions({
  gfm: true,
@@ -16,7 +16,7 @@ const Markdown = React.createClass({
  return require('highlight.js').highlightAuto(code).value;
  },
  });
- },
+ }
 
  render() {
  const html = marked.parse(this.props.children);
@@ -27,7 +27,7 @@ const Markdown = React.createClass({
  dangerouslySetInnerHTML={{__html: html}}
  />
  );
- },
-});
+ }
+}
 
 export default Markdown;

example/components/Page.react.js

@@ -1,4 +1,6 @@
-import React, {Children, PropTypes} from 'react';
+import React, {Children} from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import {Col, Jumbotron, NavItem, Row} from 'react-bootstrap';
 
 import Container from './Container';
@@ -8,7 +10,7 @@ import PageMenu from './PageMenu';
 
 import getIdFromTitle from '../util/getIdFromTitle';
 
-const Page = React.createClass({
+const Page = createReactClass({
  getInitialState() {
  return {
  activeHref: window.location.hash,

example/components/Section.react.js

@@ -1,12 +1,14 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
 import Anchor from './Anchor';
 import ScrollSpy from './ScrollSpy';
 
 import getIdFromTitle from '../util/getIdFromTitle';
 
 const sectionContainer = Component => (
- React.createClass({
+ createReactClass({
  contextTypes: {
  onAfter: PropTypes.func.isRequired,
  onBefore: PropTypes.func.isRequired,

example/components/Title.react.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import Anchor from './Anchor';
 

example/examples/AsyncExample.react.js

@@ -8,14 +8,17 @@ import {AsyncTypeahead} from '../../src/';
 require('es6-promise').polyfill();
 
 /* example-start */
-const AsyncExample = React.createClass({
- getInitialState() {
- return {
+class AsyncExample extends React.Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
  allowNew: false,
  multiple: false,
  options: [],
  };
- },
+ }
 
  render() {
  return (
@@ -30,7 +33,7 @@ const AsyncExample = React.createClass({
  {this._renderCheckboxes()}
  </div>
  );
- },
+ }
 
  _renderCheckboxes() {
  const checkboxes = [
@@ -47,7 +50,7 @@ const AsyncExample = React.createClass({
  {label}
  </Checkbox>
  ));
- },
+ }
 
  _renderMenuItemChildren(option, props, index) {
  return (
@@ -63,12 +66,12 @@ const AsyncExample = React.createClass({
  <span>{option.login}</span>
  </div>
  );
- },
+ }
 
  _handleChange(e) {
  const {checked, name} = e.target;
  this.setState({[name]: checked});
- },
+ }
 
  _handleSearch(query) {
  if (!query) {
@@ -78,8 +81,8 @@ const AsyncExample = React.createClass({
  fetch(`https://api.github.com/search/users?q=${query}`)
  .then(resp => resp.json())
  .then(json => this.setState({options: json.items}));
- },
-});
+ }
+}
 /* example-end */
 
 export default AsyncExample;

example/examples/BasicBehaviorsExample.react.js

@@ -6,14 +6,16 @@ import {Typeahead} from '../../src/';
 import options from '../../example/exampleData';
 
 /* example-start */
-const BasicBehaviorsExample = React.createClass({
- getInitialState() {
- return {
+class BasicBehaviorsExample extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
  disabled: false,
  dropup: false,
  minLength: 0,
  };
- },
+ }
 
  render() {
  const {disabled, dropup, emptyLabel, minLength} = this.state;
@@ -56,7 +58,7 @@ const BasicBehaviorsExample = React.createClass({
  </FormGroup>
  </div>
  );
- },
+ }
 
  _handleChange(e) {
  const {checked, name} = e.target;
@@ -67,8 +69,8 @@ const BasicBehaviorsExample = React.createClass({
  }
 
  this.setState(newState);
- },
-});
+ }
+}
 /* example-end */
 
 export default BasicBehaviorsExample;

example/examples/BasicExample.react.js

@@ -5,12 +5,14 @@ import {Typeahead} from '../../src/';
 import options from '../../example/exampleData';
 
 /* example-start */
-const BasicExample = React.createClass({
- getInitialState() {
- return {
+class BasicExample extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
  multiple: false,
  };
- },
+ }
 
  render() {
  const {multiple} = this.state;
@@ -30,8 +32,8 @@ const BasicExample = React.createClass({
  </Checkbox>
  </div>
  );
- },
-});
+ }
+}
 /* example-end */
 
 export default BasicExample;

example/examples/BodyContainerExample.react.js

@@ -5,12 +5,13 @@ import {Typeahead} from '../../src/';
 import options from '../../example/exampleData';
 
 /* example-start */
-const BodyContainerExample = React.createClass({
- getInitialState() {
- return {
+class BodyContainerExample extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
  bodyContainer: false,
  };
- },
+ }
 
  render() {
  const {bodyContainer} = this.state;
@@ -40,8 +41,8 @@ const BodyContainerExample = React.createClass({
  </Checkbox>
  </div>
  );
- },
-});
+ }
+}
 /* example-end */
 
 export default BodyContainerExample;

example/examples/CustomFilteringExample.react.js

@@ -5,12 +5,14 @@ import {Typeahead} from '../../src/';
 import options from '../../example/exampleData';
 
 /* example-start */
-const CustomFilteringExample = React.createClass({
- getInitialState() {
- return {
+class CustomFilteringExample extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state ={
  filterBy: 'callback',
  };
- },
+ }
 
  render() {
  const {filterBy} = this.state;
@@ -55,8 +57,8 @@ const CustomFilteringExample = React.createClass({
  ))}
  </div>
  );
- },
-});
+ }
+}
 /* example-end */
 
 export default CustomFilteringExample;

example/examples/CustomSelectionsExample.react.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {Typeahead} from '../../src/';
 
 /* example-start */
-const CustomSelectionsExample = React.createClass({
+class CustomSelectionsExample extends React.Component {
  render() {
  return (
  <Typeahead
@@ -13,8 +13,8 @@ const CustomSelectionsExample = React.createClass({
  placeholder="Type anything..."
  />
  );
- },
-});
+ }
+}
 /* example-end */
 
 export default CustomSelectionsExample;