Typescript Glossary

Animation

An animation being executed by the frameloop. Normally found attached to a SpringValue.

class Animation<T = any> { 
 changed: boolean 
 values: readonly AnimatedValue[] 
 toValues: readonly number[] | null 
 fromValues: readonly number[] 
 to: T | FluidValue<T> 
 from: T | FluidValue<T> 
 config: AnimationConfig 
 immediate: boolean 
} 

AnimationProps

Most of the reserved animation props, except to, from, loop, and the event props.

interface AnimationProps<T = any> { 
 config?: SpringConfig | ((key: StringKeys<T>) => SpringConfig) 
 delay?: number | ((key: StringKeys<T>) => number) 
 immediate?: MatchProp<T> 
 cancel?: MatchProp<T> 
 pause?: MatchProp<T> 
 reset?: MatchProp<T> 
 reverse?: boolean 
 default?: boolean | SpringProps<T> 
} 

ControllerUpdate

A value that any SpringValue or Controller can animate to.

export declare type ControllerUpdate< State extends Lookup = Lookup, Item = undefined, > = unknown & ToProps<State> & ControllerProps<State, Item> 

Lookup

Lookup is typically inferred, so you probably won't need to use it. It's primarily used to infer the animatable properties from our hooks, e.g. opacity

interface Lookup<T = any> { 
 [key: string]: T 
} 

OneOrMore

export type OneOrMore<T> = T | readonly T[] 

SpringUpdate

The props of a useSpring call or its async update function. The T parameter can be a set of animated values (as an object type) or a primitive type for a single animated value.

type SpringUpdate<T = any> = ToProps<T> & SpringProps<T> 
type SpringsUpdate<State extends Lookup = UnknownProps> = 
 | OneOrMore<ControllerUpdate<State>> 
 | ((index: number, ctrl: Controller<State>) => ControllerUpdate<State> | null) 

SpringValues

SpringValues is contextual to the values you pass to your hook e.g. opacity. It's type signature is quite complicated, so it's easier to show how you use it.

type MySpringValues = SpringValues<{ 
 opacity: number 
 y: string 
}> 

TransitionState

TransitionState is the internal state attached to a particular Item (a single datum from the data array you pass).

interface TransitionState<Item = any, State extends Lookup = Lookup> { 
 key: any 
 item: Item 
 ctrl: Controller<State> 
 phase: TransitionPhase 
 expired?: boolean 
 expirationId?: number 
} 

UnknownProps

Intersected with other object types to allow for unknown properties.

export interface UnknownProps extends Lookup<unknown> {}