pmndrs / pmndrs/react-spring

Support promises and animated values for "expires" prop of v9 useTransition

Open
#871 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

kind: request
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:

  1. 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.
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.