New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onMount={props => ...} #167

Open
drcmda opened this Issue Sep 7, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@drcmda

drcmda commented Sep 7, 2018

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

This comment has been minimized.

Show comment
Hide comment
@TrySound

TrySound Sep 8, 2018

Collaborator

I suggested something like this before, we may reconsider it.
#43

Collaborator

TrySound commented Sep 8, 2018

I suggested something like this before, we may reconsider it.
#43

@drcmda

This comment has been minimized.

Show comment
Hide comment
@drcmda

drcmda Sep 8, 2018

Oh my, i thought i searched carefully enough.

drcmda commented Sep 8, 2018

Oh my, i thought i searched carefully enough.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment