Skip to content

Instantly share code, notes, and snippets.

@jdmorlan

jdmorlan/intro.md

Created December 12, 2016 06:24
Show Gist options
  • Save jdmorlan/783e47f91f060019f3e44ca87aa5302f to your computer and use it in GitHub Desktop.
Save jdmorlan/783e47f91f060019f3e44ca87aa5302f to your computer and use it in GitHub Desktop.
Download ZIP
React Transition Group - Following D3 enter/exit/update model!
Raw
intro.md

Create a TransitionGroup component that provides three hooks!

  1. Component Will Enter
  2. Component Will Leave
  3. Component Will Update

Component Will Update is for items that were previously in the list, that are no longer in the list.

This is somewhat available today by using the componentWillUpdate instance method on a component, but I don't want to have to provide specific props to check. I want the TransitionGroup to just tell me hey, these are the items that are staying, these are the items that are going, and these are the items that are coming.

The majority of the logic can be borrowed from the current ReactTransitionGroup, the part that will have to be added is the update portion, since the current ReactTransitionGroup only tells you enter/leave.

Maybe this is a bad solution to a problem being viewed incorrectly, but as it stands now, I can't make my implementation of withPositionalContainer generic because it still depends on context sensitive props to determine if it should run the update animations. I want it to explicit in saying, hey this item is being updated in terms of staying in the current list.

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