onMount={props => ...}

[drcmda]

I'm trying to use powerplug in a docz Playground, where components can only be instanciated without carrying state. I would like to run a couple of actions once the component has mounted. It would generally be nice if powerplug components had simple to use mounting semantics where the same props that are otherwise accessible in render could be used to drive async actions, receive stuff, etc.

My specific problem:

<Playground>
  <List initial={['Apples', 'Oranges', 'Bananas']}>
    {({ list, push, pull }) => (

      // I'd like to call setTimeouts on startup, removing an item on the first,
      // adding items on the second, can't do it here coz it would cause a loop

      <Transition
        keys={list}
        from={{ overflow: 'hidden', height: 0 }}
        enter={{ height: 30, background: '#28d79f' }}
        leave={{ height: 0, background: '#c23369' }}
        update={{ background: '#28b4d7' }}
        config={config.molasses}>
        {list.map(item => props => <div style={props}>{item}</div>)}
      </Transition>
    )}
  </List>
</Playground>

A possible solution:

<Playground>
  <List 
    initial={['Apples', 'Oranges', 'Bananas']}
    onMount={async ({ push, pull }) => {
      await delay(1000)
      pull(item => item === 'Oranges')
      await delay(1000)
      push('Kiwis')
    }}>
    {({ list }) => (
      <Transition
        keys={list}
        from={{ overflow: 'hidden', height: 0 }}
        enter={{ height: 30, background: '#28d79f' }}
        leave={{ height: 0, background: '#c23369' }}
        update={{ background: '#28b4d7' }}
        config={config.molasses}>
        {list.map(item => props => <div style={props}>{item}</div>)}
      </Transition>
    )}
  </List>
</Playground>

[TrySound]

I suggested something like this before, we may reconsider it. https://github.com/renatorib/react-powerplug/pull/43

[drcmda]

Oh my, i thought i searched carefully enough.