abalmos / cerebral-react

React View layer package for Cerebral

cerebral-react

React View layer package for Cerebral

The Cerebral Webpage is now launched

You can access the webpage at http://christianalfoni.com/cerebral/

Debugger

You can download the Chrome debugger here.

Install

npm install cerebral-react

API

All examples are shown with ES6 syntax.

Render the app

// Your controller instance
import controller from './controller.js';
import React from 'react';
import {Container} from 'cerebral-react';

// Your main application component
import App from './components/App.js';

// With React 0.14
React.render(
  <Container controller={controller}>
    <App/>
  </Container>
, document.querySelector('#app'));

// Earlier versions
React.render(<Container controller={controller} app={App}/>, document.querySelector('#app'));

Get state in components

Decorator

import React from 'react';
import {Decorator as Cerebral} from 'cerebral-react';

@Cerebral({
  isLoading: ['isLoading'],
  user: ['user'],
  error: ['error']  
})
class App extends React.Component {
  componentDidMount() {
    this.props.signals.appMounted();
  }
  render() {
    return (
      <div>
        {this.props.isLoading ? 'Loading...' : 'hello ' + this.props.user.name}
        {this.props.error ? this.props.error : null}
      </div>
    );
  }
}

You can also use a function on your decorator:

@Cerebral((props) => {
  return {
    item: ['items', props.itemRef]
  };
})

Higher Order Component

import React from 'react';
import {HOC} from 'cerebral-react';

class App extends React.Component {
  componentDidMount() {
    this.props.signals.appMounted();
  }
  render() {
    return (
      <div>
        {this.props.isLoading ? 'Loading...' : 'hello ' + this.props.user.name}
        {this.props.error ? this.props.error : null}
      </div>
    );
  }
}

App = HOC(App, {
  isLoading: ['isLoading'],
  user: ['user'],
  error: ['error']  
});

You can also use a function on your HOC:

App = HOC(App, (props) => {
  return {
    item: ['items', props.itemRef]
  };
});

Mixin

import React from 'react';
import {Mixin} from 'cerebral-react';

const App = React.createClass({
  mixins: [Mixin],
  getStatePaths() {
    return {
      isLoading: ['isLoading'],
      user: ['user'],
      error: ['error']  
    };
  },
  componentDidMount() {
    this.props.signals.appMounted();
  },
  render() {
    return (
      <div>
        {this.state.isLoading ? 'Loading...' : 'hello ' + this.state.user.name}
        {this.state.error ? this.state.error : null}
      </div>
    );
  }
});

Component

import {Component} from 'cerebral-react';

// Stateless
const MyStatelessComponent = Component({
  foo: ['foo']
}, (props) => (
  <h1>{props.foo}</h1>;
));

// Stateful
const MyStatefulComponent = Component({
  foo: ['foo']
}, {
  getInitialState() {
    return {
      bar: 'bar'
    }
  },
  render() {
    return <h1>{this.props.foo + this.state.bar}</h1>;
  }
});

// No Cerebral state. Same for stateful component
const MyStatelessComponent = Component((props) => (
  <h1>Hello world</h1>
));

You can also use a function to define state paths:

const MyStatelessComponent = Component((props) => (
  {
    foo: ['foo', props.bar]
  }
), (props) => (
  <h1>{props.foo}</h1>;
));