@cerebral/react v4.2.1
@cerebral/react
React view for Cerebral.
Install
npm install @cerebral/react react react-dom babel-preset-react
Container
import React from 'react'
import {render} from 'react-dom'
import {Controller} from 'cerebral'
import {Container} from '@cerebral/react'
import App from './App'
const controller = Controller({
state: {
foo: 'bar'
},
signals: {
clicked: []
}
})
render((
<Container controller={controller}>
<App />
</Container>
), document.querySelector('#app'))
connect
Typically you add a stateless component:
import React from 'react'
import {state, signal} from 'cerebral/tags'
import {connect} from '@cerebral/react'
export default connect({
foo: state`foo`,
click: signal`clicked`
},
function MyComponent ({foo, click}) {
return <div onClick={() => click()}>{foo}</div>
}
)
But you can also use stateful components:
import React from 'react'
import {state, signal} from 'cerebral/tags'
import {connect} from '@cerebral/react'
export default connect({
foo: state`foo`,
click: signal`clicked`
},
class MyComponent extends React.Component {
render () {
return <div onClick={() => this.props.click()}>{this.props.foo}</div>
}
}
)
You can add an additional function to connect that gives you full control of properties of the component and dependencies. The returned object from this function will be the exact props passed into the component.
import React from 'react'
import {signal, state} from 'cerebral/tags'
import {connect} from '@cerebral/react'
export default connect({
foo: state`app.foo`,
clicked: signal`app.somethingClicked`
}, (dependencyProps, ownProps, resolve) => {
// we can resolve values or path here. Note: it's not tracked as dependency
const path = resolve.path(state`entities.foo.{ownProps}`)
return {
// values from state could be transformed here
foo: `Label: ${foo}`,
// signals calls could be bound here, so component uses it as general callback
onClick: (e) => clicked({ id: ownProps.id })
}
},
function App({foo, onClick}) {
return <div onClick={onClick}>{foo}</div>
}
)
dependencyProps are the props you connected.
props are the props passed into the component by the parent.
resolve allows you to resolve computed etc., just like resolve in actions.
TypeScript
If you use TypeScript, you can type your component props with connect:
import React from 'react'
import {state, signal} from 'cerebral/tags'
import {connect} from '@cerebral/react'
// connected props
interface Props {
click (): void
foo: string
}
// component props such as <MyComponent name='foobar' />
interface EProps {
name: string
}
// Stateless
export default connect<Props, EProps>({
foo: state`foo`,
click: signal`clicked`
},
// TypeScript now knows about foo and click props
function MyComponent ({foo, click}) {
return <div onClick={() => click()}>{foo}</div>
}
)
// Stateful
export default connect<Props, EProps>({
foo: state`foo`,
click: signal`clicked`
},
class MyComponent extends React.Component<Props, EProps> {
render () {
return <div onClick={() => this.props.click()}>{this.props.foo}</div>
}
}
)
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago