Support promises and animated values for "expires" prop of v9 useTransition
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 29.1k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Feature proposal for the new expires prop:
- pass in a single animated value, or an array of animated values, so unmount will wait for these additional animated value(s) to rest, or if they're already at rest.
- pass in a single Promise, or an array of Promises, so unmount will wait for the Promises to resolve.
A real-world use case for (1) above is when animating an interactive chart. Use a Spring value to animate the chart's x/y axis, while useTransition to manage the enter/leave/update of elements on the chart.
// Pass the animated value `x` to the `expires` prop of transition,
// so that the unmount event can wait for the X-axis animation to rest,
// instead of in the middle of X-axis animation.
const [{ x }, setAxis] = useSpring(() => { x: 100 });
const transition = useTransition(elements, { ...props, expires: [x] });
Originally posted by @guopengliang in https://github.com/react-spring/react-spring/pull/809#issuecomment-530700055
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at useTransition and the expires option described here, then trace how useSpring animated values reach rest and how Promise resolution could be observed. Done means unmount waits for each supplied animated value to rest or each supplied Promise to resolve, including already-resting values and array inputs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100