How to use the react.createClass function in react

To help you get started, we’ve selected a few react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github appbaseio / dejavu / src / js / featureComponent.jsx View on Github external
<li>Get the latest release for your system from
                            <a href="https://github.com/appbaseio/transporter/releases/tag/v0.1.2-appbase"> here <span></span></a>.</li>
                          <li>Set the source and sink configurations as mentioned
                          in the file here, and save it in the same folder as config.yml.</li>
                        <li>Run the transporter using ./transporter run --config &lt;config_file&gt; &lt;transform_file&gt;</li>
                        
                        <p>Or shoot us at info@appbase.io or intercom if you want us to help with importing data.</p>
                      
                    
                  );
    }
});

// Prettify the json body i.e. embed that into
// a code block so that highlightjs recognises it.
var Pretty = React.createClass({
    componentDidMount: function() {
        var current = React.findDOMNode(this);
        hljs.highlightBlock(current);
    },
    selectText: function() {
        var range = document.createRange();
        var selection = window.getSelection();
        var ele = document.getElementById('for-copy');
        range.selectNodeContents(ele);
        selection.removeAllRanges();
        selection.addRange(range);
    },
    render: function() {

        return (<pre>                    <code></code></pre>
github expalmer / react-progress-form / src / js / components / Input.js View on Github external
var React     = require('react');
var classSet  = require('../utils/classSet');

var InputElement = React.createClass({
  render: function() {
    var item = this.props.item;
    var classes = classSet({
      "form--group": true,
      "has--error": item.hasError &amp;&amp; !item.pristine
    });
    return (
      <div>
        <label>{item.label}</label>
        <input value="{item.value}" id="{item.id}" type="text">
        <span></span>
        <span>{item.errorMessage}</span>
      </div>
    );
  },
  _onChange: function(e) {
github Evo-Forge / Essence / dist / js / components / Highlighter.js View on Github external
'use strict';

var React = require('react'),
    PubSub = require('../utils/PubSub');

module.exports = React.createClass({
  displayName: 'Highlighter',

  mixins: [PubSub],

  getInitialState: function getInitialState() {
    return {
      direction: 'to-right',
      styles: {
        display: 'none',
        left: '0px',
        right: '0px'
      },
      Highlighter: false
    };
  },
github LesRedfield / applicative / frontend / components / highchart.jsx View on Github external
const React = require('react');
const Highcharts = require('highcharts');
const OptionsActions = require('../actions/options_actions');

const Highchart = React.createClass({

  componentDidMount() {

  },

  componentWillUpdate() {
    this.chart = new Highcharts[this.props.type || "Chart"](
      this.props.container,
      this.props.options
    );
  },

  render() {
    let klass = "chart"

    if (this.props.dashSeg) {
github remobile / react-native-template / project / App / modules / text / MorePanel.js View on Github external
render() {
        const {item, size, onPress} = this.props;
        const {icon, index} = item;
        return (
            icon!=null ?
            
                <img style="{{width:size,">
                
            
            :
github ericclemmons / react-resolver / src / resolver.js View on Github external
route(routes) {
    let context = { resolver: this };

    let ResolverContext = React.createClass({
      childContextTypes: mixin.contextTypes,

      getChildContext: function() {
        return context;
      },

      render: function() {
        return ;
      }
    });

    return (
      
        {routes}
      
    );
github Khan / perseus / src / article-demo.jsx View on Github external
*/

const React = require("react");
const ArticleEditor = require("./article-editor.jsx");
const StatefulArticleEditor = require("./stateful-article-editor.jsx");
const Util = require("./util.js");

const defaultArticle = [
    {
        content: "",
        images: {},
        widgets: {},
    },
];

const ArticleDemo = React.createClass({
    propTypes: {
        content: React.PropTypes.any.isRequired,
    },

    getDefaultProps() {
        return {
            content: defaultArticle,
        };
    },

    getInitialState: function() {
        return {
            isMobile: navigator.userAgent.indexOf("Mobile") !== -1,
        };
    },
github fireflylearning / pattern-library / blocks / core / ff_module / ff_module-task-event / _src / ConfirmedStudentExcusedTaskEvent.js View on Github external
var author = TaskEventBase.getAuthor(props);
    var student = props.loggedInUserGuid == props.recipient.guid ? "you" : props.recipient.name;
    return author + ' excused ' + student;
}

var defaultState = React.createClass({
    displayName: 'ConfirmedStudentExcusedTaskEventDefault',
    render: taskEventWithOptionalMessage(text)
});

var deletedState = React.createClass({
    displayName: 'ConfirmedStudentExcusedTaskEventDeleted',
    render: taskEventWithOptionalMessageDeleted('deleted a confirmation of excuse.')
});

var editedState = React.createClass({
    displayName: 'ConfirmedStudentExcusedTaskEventEdited',
    render: taskEventWithOptionalMessageEdited(text)
});


module.exports = {};
module.exports[eventStates.default] = defaultState;
module.exports[eventStates.deleted] = deletedState;
module.exports[eventStates.edited] = editedState;
github joyent / sdc-adminui / www / js / components / server-link-aggr / main.jsx View on Github external
/*
 * Copyright (c) 2015, Joyent, Inc.
 */

/** @jsx React.DOM **/

var api = require('../../request');

var React = require('react');

var LinkAggregationForm = require('./form.jsx');
var LinkAggregationsList = require('./list.jsx');



var Component = React.createClass({
    propTypes: {
        server: React.PropTypes.string.isRequired,
        nics: React.PropTypes.array
    },
    getInitialState: function () {
        return {
            mode: 'list',
            linkAggregations: []
        };
    },
    componentWillMount: function () {
        this.refreshAggregations();
    },
    refreshAggregations: function () {
        api.get('/api/linkaggrs').query({belongs_to_uuid: this.props.server}).end(function (res) {
            this.setState({linkAggregations: res.body});
github GitbookIO / styleguide / src / Badge.js View on Github external
function createBadgeStyle(style) {
    return React.createClass({
        displayName: Badge.displayName + style,
        render: function() {
            return ;
        }
    });
}