How to use create-react-class - 10 common examples

import PropTypes from 'prop-types';
import React from 'react';
import createReactClass from 'create-react-class';
import {Link} from 'react-router';

import ApiMixin from 'app/mixins/apiMixin';
import IndicatorStore from 'app/stores/indicatorStore';
import {joinTeam, leaveTeam} from 'app/actionCreators/teams';
import {t} from 'app/locale';

// TODO(dcramer): this isnt great UX

const AllTeamsRow = createReactClass({
  displayName: 'AllTeamsRow',

  propTypes: {
    access: PropTypes.object.isRequired,
    organization: PropTypes.object.isRequired,
    team: PropTypes.object.isRequired,
    openMembership: PropTypes.bool.isRequired,
  },

  mixins: [ApiMixin],

  getInitialState() {
    return {
      loading: false,
      error: false,
    };

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';

import Cartesian2 from 'terriajs-cesium/Source/Core/Cartesian2';
import Styles from './terria-viewer-wrapper.scss';

import Splitter from './Splitter';
import ObserveModelMixin from '../ObserveModelMixin';
import TerriaViewer from '../../ViewModels/TerriaViewer';

const TerriaViewerWrapper = createReactClass({
    displayName: 'TerriaViewerWrapper',
    mixins: [ObserveModelMixin],

    lastMouseX: -1,
    lastMouseY: -1,

    propTypes: {
        terria: PropTypes.object.isRequired,
        viewState: PropTypes.object.isRequired
    },

    componentDidMount() {
        // Create the map/globe.
        this.terriaViewer = TerriaViewer.create(this.props.terria, {
            terrain: this.props.terria.configParameters.cesiumTerrainUrl,
            developerAttribution: {

getQueryStringWithoutEnvironment,
} from 'app/utils/queryString';
import {setActiveEnvironmentName} from 'app/actionCreators/environments';
import {t, tct} from 'app/locale';
import withApi from 'app/utils/withApi';
import EmptyStateWarning from 'app/components/emptyStateWarning';
import EventsTable from 'app/components/eventsTable/eventsTable';
import LoadingError from 'app/components/loadingError';
import LoadingIndicator from 'app/components/loadingIndicator';
import Pagination from 'app/components/pagination';
import SearchBar from 'app/components/searchBar';
import SentryTypes from 'app/sentryTypes';
import parseApiError from 'app/utils/parseApiError';
import withEnvironmentInQueryString from 'app/utils/withEnvironmentInQueryString';

const GroupEvents = createReactClass({
  displayName: 'GroupEvents',

  propTypes: {
    api: PropTypes.object,
    group: SentryTypes.Group,
    environment: SentryTypes.Environment,
  },

  getInitialState() {
    const queryParams = this.props.location.query;

    const initialState = {
      eventList: [],
      loading: true,
      error: false,
      pageLinks: '',

import createReactClass from 'create-react-class';
import styled from 'react-emotion';

import {addErrorMessage, addSuccessMessage} from 'app/actionCreators/indicator';
import {t} from 'app/locale';
import withApi from 'app/utils/withApi';
import Avatar from 'app/components/avatar';
import AvatarCropper from 'app/components/avatarCropper';
import LoadingError from 'app/components/loadingError';
import LoadingIndicator from 'app/components/loadingIndicator';
import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
import RadioGroup from 'app/views/settings/components/forms/controls/radioGroup';
import SentryTypes from 'app/sentryTypes';
import Well from 'app/components/well';

const AccountAvatar = createReactClass({
  displayName: 'AccountAvatar',

  propTypes: {
    api: PropTypes.object,
    userId: PropTypes.number,
    user: SentryTypes.User,
    onSave: PropTypes.func,
  },

  getDefaultProps() {
    return {
      onSave: () => {},
    };
  },

  getInitialState() {

grouping_fields: [],
            distinction_fields: [],
            field: '',
            type: ''
        },
        stream: {
            matching_type: '',
            field_rule: [{field: '', type: '', value: ''}],
        },
        second_stream: {
            matching_type: '',
            field_rule: [{field: '', type: '', value: ''}],
        },
    };

const CreateAlertInput = createReactClass({
    displayName: 'CreateAlertInput',

    propTypes: {
        alert: PropTypes.object,
        create: PropTypes.bool.isRequired,
    },
    contextTypes: {
        intl: PropTypes.object.isRequired,
    },
    componentWillMount(){
        const messages = {
                titlePopup: this.context.intl.formatMessage({id: "wizard.titlePopup", defaultMessage: "Alert rule is saved"}),
                messagePopup: this.context.intl.formatMessage({id: "wizard.messagePopup", defaultMessage: "Go to Advanced settings?"}),
                advancedSettings: this.context.intl.formatMessage({id: "wizard.advancedSettings", defaultMessage: "Advanced settings"}),
                done: this.context.intl.formatMessage({id: "wizard.done", defaultMessage: "I'm done!"}),
                placeholderTitle: this.context.intl.formatMessage({id: "wizard.placeholderTitle", defaultMessage: "Title of the alert rule                 "}),

return function (DecoratedComponent) {
    const decoratorDisplayName = options.displayName || 'UserIsAuthenticated';
    const displayName = getDisplayName(DecoratedComponent);

    return createReactClass(_.defaults({}, options, {
      displayName: `${decoratorDisplayName}(${displayName})`,

      propTypes: {
        router: PropTypes.object.isRequired
      },

      componentWillMount() {
        const isAuthenticated = this.isAuthenticated();

        if (!isAuthenticated) {
          this.redirect();
        }

        this.setState({
          isAuthenticated: isAuthenticated
        });

render() {
    return (
      <form>
        <p>
          <input placeholder="First name" type="text">
          <input placeholder="Last name" type="text">
        </p>
        <p>
          <button type="submit">Save</button> Cancel
        </p>
      </form>
    );
  }
});

const NotFound = createReactClass({
  render() {
    return <h2>Not found</h2>;
  }
});

render(
  
    
      
      
      
      
    
  ,
  document.getElementById("root")
);

import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import { ButtonToolbar, DropdownButton, MenuItem } from 'components/graylog';

import { PaginatedList, SearchForm, Spinner, EntityList } from 'components/common';
import View from './View';

const ViewList = createReactClass({
  propTypes: {
    views: PropTypes.arrayOf(PropTypes.object),
    pagination: PropTypes.shape({
      total: PropTypes.number.isRequired,
      page: PropTypes.number.isRequired,
      perPage: PropTypes.number.isRequired,
    }).isRequired,
    handleSearch: PropTypes.func.isRequired,
    handleViewDelete: PropTypes.func.isRequired,
  },

  getDefaultProps() {
    return {
      views: undefined,
    };
  },

import Immutable from 'immutable';

import CombinedProvider from 'injection/CombinedProvider';
import StoreProvider from 'injection/StoreProvider';

import PermissionsMixin from 'util/PermissionsMixin';
import { WidgetCreationModal } from 'components/widgets';
import { EditDashboardModal } from 'components/dashboard';

import style from './AddToDashboardMenu.css';

const SearchStore = StoreProvider.getStore('Search');
const { DashboardsStore } = CombinedProvider.get('Dashboards');
const WidgetsStore = StoreProvider.getStore('Widgets');

const AddToDashboardMenu = createReactClass({
  displayName: 'AddToDashboardMenu',

  propTypes: {
    widgetType: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    permissions: PropTypes.arrayOf(PropTypes.string).isRequired,
    bsStyle: PropTypes.string,
    configuration: PropTypes.object,
    fields: PropTypes.array,
    hidden: PropTypes.bool,
    pullRight: PropTypes.bool,
    appendMenus: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.element),
      PropTypes.element,
    ]),
    children: PropTypes.oneOfType([

"use strict";
import ObserveModelMixin from "./ObserveModelMixin";
import React from "react";
import createReactClass from "create-react-class";
import PropTypes from "prop-types";
import Icon from "./Icon.jsx";

import Styles from "./loader.scss";

const Loader = createReactClass({
  displayName: "Loader",
  mixins: [ObserveModelMixin],

  getDefaultProps() {
    return {
      className: "",
      message: "Loading..."
    };
  },

  propTypes: {
    message: PropTypes.string,
    className: PropTypes.string
  },

  render() {