[bug]: Spring Config function not called when using Imperative API
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 29.1k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Which react-spring target are you using?
-
@react-spring/web -
@react-spring/three -
@react-spring/native -
@react-spring/konva -
@react-spring/zdog
What version of react-spring are you using?
9.7.3
What's Wrong?
I'd like to use the Imperative API (https://react-spring.dev/docs/concepts/imperative-api) with a Spring Config function (https://react-spring.dev/docs/advanced/config#config-per-springvalue) to customize friction, tension, etc per SpringValue, like this:
const springConfig = (key) => {
if (key === "opacity")
return { tension: 60, friction: 10, precision: 0.0001 };
else if (key === "scaleX") return { tension: 58, friction: 4.3 };
else if (key === "scaleY") return { tension: 70, friction: 4 };
return {};
};
const animation = useSpringRef();
const springs = useSpring({
ref: animation,
from: { opacity: 0, scaleX: 0.96, scaleY: 0.96 },
config: springConfig
});
but the config function is never called (example: https://codesandbox.io/s/react-spring-bug-277lrl?file=/App.js).
To Reproduce
With this minimal snippet:
const springConfig = (key) => {
if (key === "opacity")
return { tension: 60, friction: 10, precision: 0.0001 };
else if (key === "scaleX") return { tension: 58, friction: 4.3 };
else if (key === "scaleY") return { tension: 70, friction: 4 };
return {};
};
const animation = useSpringRef();
const springs = useSpring({
ref: animation,
from: { opacity: 0, scaleX: 0.96, scaleY: 0.96 },
config: springConfig
});
Or see this codesandbox: https://codesandbox.io/s/react-spring-bug-277lrl?file=/App.js
Expected Behaviour
Spring Config function should be called when using the Imperative API.
Link to repo
https://codesandbox.io/s/react-spring-bug-277lrl?file=/App.js
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 by running the linked CodeSandbox and compare the documented Imperative API with the per-SpringValue config behavior. Trace how the config function is handled for @react-spring/web when a useSpringRef is supplied; done means the function is called and its per-key tension, friction, and precision values are applied.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100