Closed
Description
Description
Since configuration for a transition is usually static or a static composition of functions, it makes sense to define it outside of the component body:
const config = {
trail: 100,
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 }
};
const keys = item => item.id;
function MyAnimation({ items }) {
const transitions = useTransition({ items, keys, ...config });
// ....
}The current approach of having a single configuration argument makes this slightly less usefull since you need to spread that static configuration over the object that includes items and keys too.
Proposal
I propose to change the API to this:
useTransition(items, keys, config);
This reduce the need for the creation of a pretty useless object at render time.
Additional note
This makes the API more coherent with useTrail:
useTrail(items.length, config);
useTransitions(items, keys, config);