API Reference / @gtkx/animated / useTransition
Function: useTransition()
Call Signature
useTransition<
Item,Props>(data,props,deps?): [Props] extends [Any] ?Lookup<any> : [object] extends [Props] ?Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] } extendsState?StateextendsLookup<any> ? [TransitionFn<Item,anyextendsany?any:any>,SpringRef<State>] :never:never
Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:1177
Type Parameters
Item
Item
Props
Props extends object
Parameters
data
OneOrMore<Item>
props
() => { cancel?: MatchProp<UnknownProps>; config?: Partial<AnimationConfig> | ((item, index, state) => Partial<AnimationConfig> | ((key) => SpringConfig) | undefined); default?: boolean | SpringProps<UnknownProps>; delay?: number | ((key) => number); enter?: TransitionTo<Item>; exitBeforeEnter?: boolean; expires?: number | boolean | ((item) => number | boolean); from?: TransitionFrom<Item>; immediate?: MatchProp<UnknownProps>; initial?: TransitionFrom<Item>; keys?: ItemKeys<Item>; leave?: TransitionTo<Item>; loop?: LoopProp<ControllerUpdate<Lookup<any>, undefined>>; onChange?: OnChange<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnChange<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onDestroyed?: (item, key) => void; onPause?: OnPause<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnPause<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onProps?: OnProps<UnknownProps> | {[key: string]: OnProps<unknown> | undefined; }; onRest?: OnRest<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnRest<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onResume?: OnResume<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnResume<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onStart?: OnStart<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnStart<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; pause?: MatchProp<UnknownProps>; ref?: SpringRef<Lookup<any>>; reset?: MatchProp<UnknownProps>; reverse?: boolean; sort?: (a, b) => number; trail?: number; update?: TransitionTo<Item>; } | Props & { [P in string | number | symbol]: (Pick<Props, Exclude<keyof Props, InvalidKeys<Props, { cancel?: (...) | (...); config?: (...) | (...) | (...); default?: (...) | (...) | (...) | (...); delay?: (...) | (...) | (...); enter?: TransitionTo<(...)>; exitBeforeEnter?: (...) | (...) | (...); expires?: (...) | (...) | (...) | (...) | (...); from?: TransitionFrom<(...)>; immediate?: (...) | (...); initial?: TransitionFrom<(...)>; keys?: (...) | (...); leave?: TransitionTo<(...)>; loop?: (...) | (...); onChange?: (...) | (...) | (...); onDestroyed?: (...) | (...); onPause?: (...) | (...) | (...); onProps?: (...) | (...) | (...); onRest?: (...) | (...) | (...); onResume?: (...) | (...) | (...); onStart?: (...) | (...) | (...); pause?: (...) | (...); ref?: (...) | (...); reset?: (...) | (...); reverse?: (...) | (...) | (...); sort?: (...) | (...); trail?: (...) | (...); update?: TransitionTo<(...)> }>>> & { [K in "reverse" | "sort" | "keys" | "ref" | "cancel" | "loop" | "config" | "from" | "pause" | "reset" | "immediate" | "default" | "delay" | "trail" | "expires" | "initial" | "enter" | "update" | "leave" | "onProps" | "onStart" | "onChange" | "onPause" | "onResume" | "onRest" | "onDestroyed" | "exitBeforeEnter"]: never })[P] }
deps?
any[]
Returns
[Props] extends [Any] ? Lookup<any> : [object] extends [Props] ? Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] } extends State ? State extends Lookup<any> ? [TransitionFn<Item, any extends any ? any : any>, SpringRef<State>] : never : never
Call Signature
useTransition<
Item,Props>(data,props):TransitionFn<Item, [Props] extends [Any] ?Lookup<any> : [object] extends [Props] ?Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] }>
Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:1178
Type Parameters
Item
Item
Props
Props extends object
Parameters
data
OneOrMore<Item>
props
{ cancel?: MatchProp<UnknownProps>; config?: Partial<AnimationConfig> | ((item, index, state) => Partial<AnimationConfig> | ((key) => SpringConfig) | undefined); default?: boolean | SpringProps<UnknownProps>; delay?: number | ((key) => number); enter?: TransitionTo<Item>; exitBeforeEnter?: boolean; expires?: number | boolean | ((item) => number | boolean); from?: TransitionFrom<Item>; immediate?: MatchProp<UnknownProps>; initial?: TransitionFrom<Item>; keys?: ItemKeys<Item>; leave?: TransitionTo<Item>; loop?: LoopProp<ControllerUpdate<Lookup<any>, undefined>>; onChange?: OnChange<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnChange<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onDestroyed?: (item, key) => void; onPause?: OnPause<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnPause<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onProps?: OnProps<UnknownProps> | {[key: string]: OnProps<unknown> | undefined; }; onRest?: OnRest<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnRest<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onResume?: OnResume<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnResume<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onStart?: OnStart<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnStart<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; pause?: MatchProp<UnknownProps>; ref?: SpringRef<Lookup<any>>; reset?: MatchProp<UnknownProps>; reverse?: boolean; sort?: (a, b) => number; trail?: number; update?: TransitionTo<Item>; } | Props & { [P in string | number | symbol]: (Pick<Props, Exclude<keyof Props, InvalidKeys<Props, { cancel?: MatchProp<(...)>; config?: Partial<(...)> | ((item: ..., index: ..., state: ...) => ...); default?: boolean | SpringProps<(...)>; delay?: number | ((key: ...) => ...); enter?: TransitionTo<Item>; exitBeforeEnter?: boolean; expires?: number | boolean | ((item: ...) => ...); from?: TransitionFrom<Item>; immediate?: MatchProp<(...)>; initial?: TransitionFrom<Item>; keys?: ItemKeys<(...)>; leave?: TransitionTo<Item>; loop?: LoopProp<(...)>; onChange?: OnChange<(...), (...), (...)> | { [key: ...]: ... }; onDestroyed?: (item: ..., key: ...) => ...; onPause?: OnPause<(...), (...), (...)> | { [key: ...]: ... }; onProps?: OnProps<(...)> | { [key: ...]: ... }; onRest?: OnRest<(...), (...), (...)> | { [key: ...]: ... }; onResume?: OnResume<(...), (...), (...)> | { [key: ...]: ... }; onStart?: OnStart<(...), (...), (...)> | { [key: ...]: ... }; pause?: MatchProp<(...)>; ref?: SpringRef<(...)>; reset?: MatchProp<(...)>; reverse?: boolean; sort?: (a: ..., b: ...) => ...; trail?: number; update?: TransitionTo<Item> }>>> & { [K in "reverse" | "sort" | "keys" | "ref" | "cancel" | "loop" | "config" | "from" | "pause" | "reset" | "immediate" | "default" | "delay" | "trail" | "expires" | "initial" | "enter" | "update" | "leave" | "onProps" | "onStart" | "onChange" | "onPause" | "onResume" | "onRest" | "onDestroyed" | "exitBeforeEnter"]: never })[P] }
Type Literal
{ cancel?: MatchProp<UnknownProps>; config?: Partial<AnimationConfig> | ((item, index, state) => Partial<AnimationConfig> | ((key) => SpringConfig) | undefined); default?: boolean | SpringProps<UnknownProps>; delay?: number | ((key) => number); enter?: TransitionTo<Item>; exitBeforeEnter?: boolean; expires?: number | boolean | ((item) => number | boolean); from?: TransitionFrom<Item>; immediate?: MatchProp<UnknownProps>; initial?: TransitionFrom<Item>; keys?: ItemKeys<Item>; leave?: TransitionTo<Item>; loop?: LoopProp<ControllerUpdate<Lookup<any>, undefined>>; onChange?: OnChange<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnChange<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onDestroyed?: (item, key) => void; onPause?: OnPause<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnPause<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onProps?: OnProps<UnknownProps> | {[key: string]: OnProps<unknown> | undefined; }; onRest?: OnRest<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnRest<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onResume?: OnResume<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnResume<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onStart?: OnStart<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnStart<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; pause?: MatchProp<UnknownProps>; ref?: SpringRef<Lookup<any>>; reset?: MatchProp<UnknownProps>; reverse?: boolean; sort?: (a, b) => number; trail?: number; update?: TransitionTo<Item>; }
cancel?
Cancel all animations by using true, or some animations by using a key or an array of keys.
config?
Partial<AnimationConfig> | ((item, index, state) => Partial<AnimationConfig> | ((key) => SpringConfig) | undefined)
Configure the spring behavior for each key.
default?
boolean | SpringProps<UnknownProps>
Override the default props with this update.
delay?
number | ((key) => number)
Milliseconds to wait before applying the other props.
enter?
TransitionTo<Item>
exitBeforeEnter?
boolean
expires?
number | boolean | ((item) => number | boolean)
When true or <= 0, each item is unmounted immediately after its leave animation is finished.
When false, items are never unmounted.
When > 0, this prop is used in a setTimeout call that forces a rerender if the component that called useTransition doesn't rerender on its own after an item's leave animation is finished.
from?
TransitionFrom<Item>
immediate?
When true, props jump to their goal values instead of animating.
initial?
TransitionFrom<Item>
keys?
ItemKeys<Item>
leave?
TransitionTo<Item>
loop?
LoopProp<ControllerUpdate<Lookup<any>, undefined>>
onChange?
OnChange<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnChange<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
Called once per frame when animations are active
Also accepts an object for per-key events
onDestroyed?
(item, key) => void
Called after a transition item is unmounted.
onPause?
OnPause<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnPause<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
onProps?
OnProps<UnknownProps> | {[key: string]: OnProps<unknown> | undefined; }
Called after an animation is updated by new props. Useful for manipulation
Also accepts an object for per-key events
onRest?
OnRest<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnRest<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
Called when the # of animating values hits 0
Also accepts an object for per-key events
onResume?
OnResume<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnResume<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
onStart?
OnStart<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnStart<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
Called when the # of animating values exceeds 0
Also accepts an object for per-key events
pause?
Pause all animations by using true, or some animations by using a key or an array of keys.
ref?
reset?
Start the next animations at their values in the from prop.
reverse?
boolean
Swap the to and from props.
sort?
(a, b) => number
trail?
number
update?
TransitionTo<Item>
Props & { [P in string | number | symbol]: (Pick<Props, Exclude<keyof Props, InvalidKeys<Props, { cancel?: MatchProp<(...)>; config?: Partial<(...)> | ((item: ..., index: ..., state: ...) => ...); default?: boolean | SpringProps<(...)>; delay?: number | ((key: ...) => ...); enter?: TransitionTo<Item>; exitBeforeEnter?: boolean; expires?: number | boolean | ((item: ...) => ...); from?: TransitionFrom<Item>; immediate?: MatchProp<(...)>; initial?: TransitionFrom<Item>; keys?: ItemKeys<(...)>; leave?: TransitionTo<Item>; loop?: LoopProp<(...)>; onChange?: OnChange<(...), (...), (...)> | { [key: ...]: ... }; onDestroyed?: (item: ..., key: ...) => ...; onPause?: OnPause<(...), (...), (...)> | { [key: ...]: ... }; onProps?: OnProps<(...)> | { [key: ...]: ... }; onRest?: OnRest<(...), (...), (...)> | { [key: ...]: ... }; onResume?: OnResume<(...), (...), (...)> | { [key: ...]: ... }; onStart?: OnStart<(...), (...), (...)> | { [key: ...]: ... }; pause?: MatchProp<(...)>; ref?: SpringRef<(...)>; reset?: MatchProp<(...)>; reverse?: boolean; sort?: (a: ..., b: ...) => ...; trail?: number; update?: TransitionTo<Item> }>>> & { [K in "reverse" | "sort" | "keys" | "ref" | "cancel" | "loop" | "config" | "from" | "pause" | "reset" | "immediate" | "default" | "delay" | "trail" | "expires" | "initial" | "enter" | "update" | "leave" | "onProps" | "onStart" | "onChange" | "onPause" | "onResume" | "onRest" | "onDestroyed" | "exitBeforeEnter"]: never })[P] }
Returns
TransitionFn<Item, [Props] extends [Any] ? Lookup<any> : [object] extends [Props] ? Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] }>
Call Signature
useTransition<
Item,Props>(data,props,deps): [Props] extends [Any] ?Lookup<any> : [object] extends [Props] ?Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] } extendsState?StateextendsLookup<any> ? [TransitionFn<Item,State>,SpringRef<State>] :never:never
Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:1179
Type Parameters
Item
Item
Props
Props extends object
Parameters
data
OneOrMore<Item>
props
{ cancel?: MatchProp<UnknownProps>; config?: Partial<AnimationConfig> | ((item, index, state) => Partial<AnimationConfig> | ((key) => SpringConfig) | undefined); default?: boolean | SpringProps<UnknownProps>; delay?: number | ((key) => number); enter?: TransitionTo<Item>; exitBeforeEnter?: boolean; expires?: number | boolean | ((item) => number | boolean); from?: TransitionFrom<Item>; immediate?: MatchProp<UnknownProps>; initial?: TransitionFrom<Item>; keys?: ItemKeys<Item>; leave?: TransitionTo<Item>; loop?: LoopProp<ControllerUpdate<Lookup<any>, undefined>>; onChange?: OnChange<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnChange<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onDestroyed?: (item, key) => void; onPause?: OnPause<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnPause<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onProps?: OnProps<UnknownProps> | {[key: string]: OnProps<unknown> | undefined; }; onRest?: OnRest<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnRest<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onResume?: OnResume<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnResume<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onStart?: OnStart<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnStart<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; pause?: MatchProp<UnknownProps>; ref?: SpringRef<Lookup<any>>; reset?: MatchProp<UnknownProps>; reverse?: boolean; sort?: (a, b) => number; trail?: number; update?: TransitionTo<Item>; } | Props & { [P in string | number | symbol]: (Pick<Props, Exclude<keyof Props, InvalidKeys<Props, { cancel?: MatchProp<(...)>; config?: Partial<(...)> | ((item: ..., index: ..., state: ...) => ...); default?: boolean | SpringProps<(...)>; delay?: number | ((key: ...) => ...); enter?: TransitionTo<Item>; exitBeforeEnter?: boolean; expires?: number | boolean | ((item: ...) => ...); from?: TransitionFrom<Item>; immediate?: MatchProp<(...)>; initial?: TransitionFrom<Item>; keys?: ItemKeys<(...)>; leave?: TransitionTo<Item>; loop?: LoopProp<(...)>; onChange?: OnChange<(...), (...), (...)> | { [key: ...]: ... }; onDestroyed?: (item: ..., key: ...) => ...; onPause?: OnPause<(...), (...), (...)> | { [key: ...]: ... }; onProps?: OnProps<(...)> | { [key: ...]: ... }; onRest?: OnRest<(...), (...), (...)> | { [key: ...]: ... }; onResume?: OnResume<(...), (...), (...)> | { [key: ...]: ... }; onStart?: OnStart<(...), (...), (...)> | { [key: ...]: ... }; pause?: MatchProp<(...)>; ref?: SpringRef<(...)>; reset?: MatchProp<(...)>; reverse?: boolean; sort?: (a: ..., b: ...) => ...; trail?: number; update?: TransitionTo<Item> }>>> & { [K in "reverse" | "sort" | "keys" | "ref" | "cancel" | "loop" | "config" | "from" | "pause" | "reset" | "immediate" | "default" | "delay" | "trail" | "expires" | "initial" | "enter" | "update" | "leave" | "onProps" | "onStart" | "onChange" | "onPause" | "onResume" | "onRest" | "onDestroyed" | "exitBeforeEnter"]: never })[P] }
Type Literal
{ cancel?: MatchProp<UnknownProps>; config?: Partial<AnimationConfig> | ((item, index, state) => Partial<AnimationConfig> | ((key) => SpringConfig) | undefined); default?: boolean | SpringProps<UnknownProps>; delay?: number | ((key) => number); enter?: TransitionTo<Item>; exitBeforeEnter?: boolean; expires?: number | boolean | ((item) => number | boolean); from?: TransitionFrom<Item>; immediate?: MatchProp<UnknownProps>; initial?: TransitionFrom<Item>; keys?: ItemKeys<Item>; leave?: TransitionTo<Item>; loop?: LoopProp<ControllerUpdate<Lookup<any>, undefined>>; onChange?: OnChange<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnChange<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onDestroyed?: (item, key) => void; onPause?: OnPause<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnPause<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onProps?: OnProps<UnknownProps> | {[key: string]: OnProps<unknown> | undefined; }; onRest?: OnRest<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnRest<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onResume?: OnResume<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnResume<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; onStart?: OnStart<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnStart<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }; pause?: MatchProp<UnknownProps>; ref?: SpringRef<Lookup<any>>; reset?: MatchProp<UnknownProps>; reverse?: boolean; sort?: (a, b) => number; trail?: number; update?: TransitionTo<Item>; }
cancel?
Cancel all animations by using true, or some animations by using a key or an array of keys.
config?
Partial<AnimationConfig> | ((item, index, state) => Partial<AnimationConfig> | ((key) => SpringConfig) | undefined)
Configure the spring behavior for each key.
default?
boolean | SpringProps<UnknownProps>
Override the default props with this update.
delay?
number | ((key) => number)
Milliseconds to wait before applying the other props.
enter?
TransitionTo<Item>
exitBeforeEnter?
boolean
expires?
number | boolean | ((item) => number | boolean)
When true or <= 0, each item is unmounted immediately after its leave animation is finished.
When false, items are never unmounted.
When > 0, this prop is used in a setTimeout call that forces a rerender if the component that called useTransition doesn't rerender on its own after an item's leave animation is finished.
from?
TransitionFrom<Item>
immediate?
When true, props jump to their goal values instead of animating.
initial?
TransitionFrom<Item>
keys?
ItemKeys<Item>
leave?
TransitionTo<Item>
loop?
LoopProp<ControllerUpdate<Lookup<any>, undefined>>
onChange?
OnChange<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnChange<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
Called once per frame when animations are active
Also accepts an object for per-key events
onDestroyed?
(item, key) => void
Called after a transition item is unmounted.
onPause?
OnPause<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnPause<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
onProps?
OnProps<UnknownProps> | {[key: string]: OnProps<unknown> | undefined; }
Called after an animation is updated by new props. Useful for manipulation
Also accepts an object for per-key events
onRest?
OnRest<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnRest<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
Called when the # of animating values hits 0
Also accepts an object for per-key events
onResume?
OnResume<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnResume<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
onStart?
OnStart<SpringValue<UnknownProps>, Controller<UnknownProps>, Item> | {[key: string]: OnStart<SpringValue<unknown>, Controller<UnknownProps>, Item> | undefined; }
Called when the # of animating values exceeds 0
Also accepts an object for per-key events
pause?
Pause all animations by using true, or some animations by using a key or an array of keys.
ref?
reset?
Start the next animations at their values in the from prop.
reverse?
boolean
Swap the to and from props.
sort?
(a, b) => number
trail?
number
update?
TransitionTo<Item>
Props & { [P in string | number | symbol]: (Pick<Props, Exclude<keyof Props, InvalidKeys<Props, { cancel?: MatchProp<(...)>; config?: Partial<(...)> | ((item: ..., index: ..., state: ...) => ...); default?: boolean | SpringProps<(...)>; delay?: number | ((key: ...) => ...); enter?: TransitionTo<Item>; exitBeforeEnter?: boolean; expires?: number | boolean | ((item: ...) => ...); from?: TransitionFrom<Item>; immediate?: MatchProp<(...)>; initial?: TransitionFrom<Item>; keys?: ItemKeys<(...)>; leave?: TransitionTo<Item>; loop?: LoopProp<(...)>; onChange?: OnChange<(...), (...), (...)> | { [key: ...]: ... }; onDestroyed?: (item: ..., key: ...) => ...; onPause?: OnPause<(...), (...), (...)> | { [key: ...]: ... }; onProps?: OnProps<(...)> | { [key: ...]: ... }; onRest?: OnRest<(...), (...), (...)> | { [key: ...]: ... }; onResume?: OnResume<(...), (...), (...)> | { [key: ...]: ... }; onStart?: OnStart<(...), (...), (...)> | { [key: ...]: ... }; pause?: MatchProp<(...)>; ref?: SpringRef<(...)>; reset?: MatchProp<(...)>; reverse?: boolean; sort?: (a: ..., b: ...) => ...; trail?: number; update?: TransitionTo<Item> }>>> & { [K in "reverse" | "sort" | "keys" | "ref" | "cancel" | "loop" | "config" | "from" | "pause" | "reset" | "immediate" | "default" | "delay" | "trail" | "expires" | "initial" | "enter" | "update" | "leave" | "onProps" | "onStart" | "onChange" | "onPause" | "onResume" | "onRest" | "onDestroyed" | "exitBeforeEnter"]: never })[P] }
deps
any[] | undefined
Returns
[Props] extends [Any] ? Lookup<any> : [object] extends [Props] ? Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] } extends State ? State extends Lookup<any> ? [TransitionFn<Item, State>, SpringRef<State>] : never : never