useAnimate

This hook share the same functionality and props as <Animate />.

import React from 'react'
import { useAnimate } from 'react-simple-animate';

export default function example {
  const [{style, play}, startAnimation] = useAnimate({
    startStyle: { opacity: 0 }, // refer <Animate /> for props information
    endStyle: { opacity: 1 }
  });
  
  return <>
    <div style={style}>show me</div>
    <button onClick={() => startAnimation(!play)}>Play</button>
  </>;
}

useAnimateKeyframes

This hook share the same functionality and props as <AnimateKeyframes />.

import React from 'react'
import { useAnimateKeyframes } from 'react-simple-animate';

export default function example {
  const [{style, play}, startAnimation] = useAnimateKeyframes({
    keyframes: [ 'opacity: 0', 'opacity: 1' ], // refer <AniamteKeyframes /> for props information
  });
  
  return <>
    <div style={style}>show me</div>
    <button onClick={() => startAnimation(!play)}>Play</button>
  </>;
}

useAnimateGroup

This hook share the same functionality and props as <AnimateGroup />.

import React from 'react'
import { useAnimateGroup } from 'react-simple-animate';

export default function example {
  const [{styles, play}, startAnimation] = useAnimateGroup({
    sequences: {
      {
        startStyle: { opacity: 0 }, // refer <Animate /> for props information
        endStyle: { opacity: 1 }
      },
      keyframes: [ 'opacity: 0', 'opacity: 1' ], // refer <AniamteKeyframes /> for props information
    }
  });
  
  return <>
    {styles.map(style) => <div style={style}>show me</div>}
    <button onClick={() => startAnimation(!play)}>Play</button>
  </>;
}