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
import controller from './controller.js';
import React from 'react';
import {Container} from 'cerebral-react';
import App from './components/App.js';
React.render(
<Container controller={controller}>
<App/>
</Container>
, document.querySelector('#app'));
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';
const MyStatelessComponent = Component({
foo: ['foo']
}, (props) => (
<h1>{props.foo}</h1>;
));
const MyStatefulComponent = Component({
foo: ['foo']
}, {
getInitialState() {
return {
bar: 'bar'
}
},
render() {
return <h1>{this.props.foo + this.state.bar}</h1>;
}
});
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>;
));