useAnimateStateChange

Animate an element when state value change.

Import

import {useAnimateStateChange} from '@kaiverse/k/hooks'

Usage

useAnimateStateChange hook animate an element when state value change.

Playground

Count++

The below displayed count element below will be flashed when you increment it:

Count value is 0

Source code

your-component.tsx

import {useAnimateStateChange} from '@kaiverse/k/hooks'
import {useReducer} from 'react'

export default function Usage() {
  const [count, incrementCount] = useReducer((c) => c + 1, 0)
  const flashElement = useAnimateStateChange<HTMLPreElement>({
    value: count,
    keyframes: {color: ['#86efac', 'inherit']},
    options: 400,
  })

  return (
    <div>
      <button className="btn btn-neutral" type="button" onClick={incrementCount}>
        Count++
      </button>
      <p>
        The below displayed <code>count</code> element below will be flashed when you increment it:
        <pre ref={flashElement}>
          Count value is <strong>{count}</strong>
        </pre>
      </p>
    </div>
  )
}

Type definition

function useAnimateStateChange<T extends HTMLElement = HTMLElement>({
  ref,
  value,
  keyframes,
  options,
  triggerOnMount,
}: AnimateStateChangeHookOptions<T>): RefObject<T | null>

Special Types

Name	Type	Description
AnimateStateChangeHookOptions	See useAnimateStateChange Options below	useAnimateStateChange options.

useAnimateStateChange Options

Name	Type	Default	Description
ref	React.RefObject<T | null>	—	Target element. If you don’t wanna provide a ref, use this hook’s returned RefObject to attach to the element.
value	unknown	—	The animation will be triggered when this value changes. If undefined or not provided, the animation will not be triggered. Note: It uses Object.is to compare with the previous value.
triggerOnMount	boolean	false	Whether to trigger the animation when the component is mounted.
keyframes	Keyframe[] | PropertyIndexedKeyframes | null	Required	Either an array of keyframe objects, or a keyframe object whose properties are arrays of values to iterate over. keyframes should be a constant. DO NOT change it at runtime, as the new one may not be applied. Read more about Keyframe Formats.
options	number | KeyframeAnimationOptions	—	Either an integer representing the animation’s duration (in milliseconds), or an Object containing one or more timing properties described in the KeyframeEffect() options parameter and/or other options. options should be a constant. DO NOT update it, as the new options may not be applied.