Using PoseGroup for more complex components

[kamranayub]

I am really liking the idea of how simple this API is but I think I've run into an issue I can't grok.

I have an existing component with state (ES6 class) and it's also using react-dnd with HOC dragSource and dropTarget decorations, as well as being connected to Redux at the high level.

This component is in a list and I want to animate the enter/exit of these list items plus additional states; perfect for Pose. The items are flex items in a flexbox grid, so I can't use the posed.div helper unless I duplicate some component logic to compute the CSS classes to add.

So in pseudocode it looks like this without Pose:

class CoreItem {
  render() {
    return dragSource(dropTarget(
      <div className={computedClasses}>
      </div>
    ))
  }
}

const ListItem = connect(mapStateToProps)(CoreItem)

const List = ({ items }) =>
  <div className="list">
    {items.map(item =>
      <ListItem key={item.id} {...item} />)}
  </div>

Now you might see my issue. In order to make the posed item a direct child of PoseGroup I would need to insert the posed component within the map probably--and it needs those computed classes (plus it feels weird).

I saw a PR #276 which seems like what I want maybe?

So I can do

class CoreItem {
  render() {
    return dragSource(dropTarget(
      <div className={computedClasses}>
      </div>
    ))
  }
}

const ListItem = connect(mapStateToProps)(CoreItem)

const poseProps = {
  enter: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: 20 }
}

const AnimatedListItem = posed(poseProps)(ListItem)

const List = ({ items }) =>
  <div className="list">
    <PoseGroup animateOnMount>
      {items.map(item =>
        <AnimatedListItem key={item.id} {...item} />)}
    </PoseGroup>
  </div>

Any help is appreciated!

[mattgperry]

Yeah it looks like this PR is what you're after, just trying to make sure the API is as simple as possible before approving.

[mattgperry]

@kamranayub Hey man! React Pose 1.5.0 has the goods.

Docs here: https://popmotion.io/pose/api/posed