@cerebral/react

React view integration for Cerebral state management.

Install

npm install @cerebral/react react react-dom

Container

The Container component connects your Cerebral app to your React components:

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from 'cerebral'
import { Container } from '@cerebral/react'
import AppComponent from './components/App'
import main from './main'

const app = App(main)

const root = createRoot(document.querySelector('#app'))
root.render(
  <Container app={app}>
    <AppComponent />
  </Container>
)

connect

The connect function binds Cerebral state and sequences to your React components:

Function Components (Recommended)

import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(
  {
    foo: state`foo`,
    onClick: sequences`onClick`
  },
  function MyComponent({ foo, onClick }) {
    return <div onClick={() => onClick()}>{foo}</div>
  }
)

Class Components

import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(
  {
    foo: state`foo`,
    onClick: sequences`onClick`
  },
  class MyComponent extends React.Component {
    render() {
      const { foo, onClick } = this.props
      return <div onClick={() => onClick()}>{foo}</div>
    }
  }
)

Dynamic Dependencies

You can dynamically access cerebral state and sequences inside components without pre-declaring them:

import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(function MyComponent({ get }) {
  const foo = get(state`foo`)
  const onClick = get(sequences`onClick`)

  return <div onClick={() => onClick()}>{foo}</div>
})

Props Transformer

You can transform props before they reach your component by adding a transformer function:

import React from 'react'
import { sequences, state } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(
  // 1. Define cerebral dependencies
  {
    foo: state`app.foo`,
    onClick: sequences`app.onClick`
  },
  // 2. Transform props before they reach the component
  (cerebralProps, componentProps, get) => {
    return {
      foo: `Label: ${cerebralProps.foo}`,
      onClick: () => cerebralProps.onClick({ id: componentProps.id })
    }
  },
  // 3. Your component receives the transformed props
  function App({ foo, onClick }) {
    return <div onClick={onClick}>{foo}</div>
  }
)

The transformer function takes three arguments:

• cerebralProps: Values from your Cerebral state and sequences
• componentProps: Props passed from parent components
• get: Function to resolve Cerebral tags and computed values

TypeScript Support

For TypeScript users, you can add static typing to your connected components. See the TypeScript documentation for details.