# @cerebral/preact

[Preact](https://preactjs.com) view for Cerebral.

## Install

`npm install @cerebral/preact preact`

## Container

```js
import { h, render } from 'preact'
import App from 'cerebral'
import { Container } from '@cerebral/preact'
import AppComponent from './components/AppComponent'
import main from './main'

const app = App(main)

render(
  <Container app={app}>
    <AppComponent />
  </Container>,
  document.querySelector('#app')
)
```

## connect

### Function Component (Recommended)

```js
import { h } from 'preact'
import { connect } from '@cerebral/preact'
import { state, sequences } from 'cerebral'

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

### Class Component

```js
import { h, Component } from 'preact'
import { connect } from '@cerebral/preact'
import { state, sequences } from 'cerebral'

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