<State initial={{ loading: false, data: null }}>
  {({ state, setState }) => (
    <DataReceiver
      data={state.data}
      onStart={() => setState({ loading: true })}
      onFinish={data => setState({ data, loading: false })}
    />
  )}
</State>

<Toggle initial={true}>
  {({ on, toggle }) => <Checkbox checked={on} onChange={toggle} />}
</Toggle>

<Counter initial={0}>
  {({ count, inc, dec }) => (
    <CartItem
      productName="Lorem ipsum"
      unitPrice={19.9}
      count={count}
      onAdd={inc}
      onRemove={dec}
    />
  )}
</Counter>

<Value initial="React">
  {({ value, set }) => (
    <Select
      label="Choose one"
      options={['React', 'Angular', 'Vue']}
      value={value}
      onChange={set}
    />
  )}
</Value>

<Map initial={{ sounds: true, graphics: 'medium' }}>
  {({ set, get }) => (
    <Settings>
      <ToggleCheck checked={get('sounds')} onChange={c => set('sounds', c)}>
        Game Sounds
      </ToggleCheck>
      <Select
        label="Graphics"
        options={['low', 'medium', 'high']}
        selected={get('graphics')}
        onSelect={value => set('graphics', value)}
      />
    </Settings>
  )}
</Map>

<Set initial={['react', 'babel']}>
  {({ values, remove, add }) => (
    <TagManager>
      <FormInput onSubmit={add} />
      {values.map(tag => (
        <Tag onRemove={() => remove(tag)}>{tag}</Tag>
      ))}
    </TagManager>
  )}
</Set>

<List initial={['Buy new shoes']}>
  {({ list, pull, push }) => (
    <Todo>
      <TodoFormInput onSubmit={push} />
      {list.map(todo => (
        <TodoItem onDelete={() => pull(i => i === todo)}>
          {todo}
        </TodoItem>
      ))}
    </Todo>
  )}
</List>

<Hover>
  {({ hovered, bind }) => (
    <div {...bind}>
      You are {hovered ? 'hovering' : 'not hovering'} this div.
    </div>
  )}
</Hover>

<Active>
  {({ active, bind }) => (
    <div {...bind}>
      You are {active ? 'clicking' : 'not clicking'} this div.
    </div>
  )}
</Active>

<Touch>
  {({ touched, bind }) => (
    <div {...bind}>
      You are {touched ? 'touching' : 'not touching'} this div.
    </div>
  )}
</Touch>

<Focus>
  {({ focused, bind }) => (
    <div>
      <input {...bind} placeholder="Focus me" />
      <div>You are {focused ? 'focusing' : 'not focusing'} input.</div>
    </div>
  )}
</Focus>

<Input initial="hello world">
  {({ bind, value }) => (
    <div>
      <ControlledInput {...bind} />
      <div>You typed {value}</div>
    </div>
  )}
</Input>

<Form initial={{ subject: '', message: '' }}>
  {({ input, values }) => (
    <form
      onSubmit={e => {
        e.preventDefault()
        console.log(values)
      }}
    >
      <ControlledInput placeholder="Subject" {...input('subject').bind} />
      <ControlledTextArea placeholder="Message" {...input('message').bind} />
      <Submit>Send</Submit>
    </form>
  )}
</Form>

<Interval delay={1000}>
  {({ stop, start }) => (
    <>
      <div>The time is now {new Date().toLocaleTimeString()}</div>
      <button onClick={() => stop()}>Stop interval</button>
      <button onClick={() => start()}>Start interval</button>
    </>
  )}
</Interval>

import { Compose } from 'react-powerplug'

<Compose components={[Toggle, Counter]}>
  {(toggle, counter) => (/* ... */)}
</Compose>

import { compose } from 'react-powerplug'

const ToggleCounter = compose(
  <Counter initial={5} />,
  <Toggle initial={false} />
)

<ToggleCounter>
  {(toggle, counter) => (
    <ProductCard {...} />
  )}
</ToggleCounter>