DOCSEARCHbyAlgolia
Submit Docs

react-useanimations

repository·master·Indexed 22 days ago

https://github.com/useanimations/react-useanimations

A collection of free, animated, open-source Lottie icons designed specifically for React.js applications. It provides the UseAnimations component to manage the Lottie lifecycle, customize appearance via props like strokeColor and fillColor, and implement interactive UI elements using a render prop pattern.

Tokens
7.6K
Snippets
6
Records
90
Agent score
79%

What's inside react-useanimations

  2. Customize animation colors and styles

    master
    You can dynamically style the SVG paths within the Lottie animation using strokeColor, fillColor, or pathCss. These props inject CSS rules into a managed stylesheet (#useAnimationsSheet) targeting the animation's unique ID. This allows you to change the color of the icon without re-loading the entire animation data.

  3. Basic usage of UseAnimations

    master

    To use an animation, you must first import the UseAnimations component and the specific animation file you want to use. Note that animations are imported from react-useanimations/lib/[animation-name]. This ensures your bundle only includes the animations you actually use.

    import React from 'react';
import UseAnimations from 'react-useanimations';
// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
import github from 'react-useanimations/lib/github'

const App = () => <UseAnimations animation={github} />;

export default App;
    import React from 'react';
import UseAnimations from 'react-useanimations';
// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
import github from 'react-useanimations/lib/github'

const App = () => <UseAnimations animation={github} />;

export default App;

  4. Use the render prop pattern with UseAnimations

    master

    If you need to wrap the animation inside another element (like a <button>), use the render prop. The render function provides two sets of props:

    1. eventProps: Contains DOM events like onClick and mouseOver. These should be spread onto your wrapping element.
    2. animationProps: Contains the actual animation properties. These should be spread onto a simple <div> inside your wrapper.
    export const WrapperElement = () => {
  return (
    <UseAnimation
      animation={heart}
      size={60}
      onClick={() => {
        // eslint-disable-next-line
        console.log('additional onClick cb is working');
      }}
      render={(eventProps, animationProps) => (
        <button style={{ padding: '20px' }} type="button" {...eventProps}>
          <div {...animationProps} />
        </button>
      )}
    />
  );
};
    export const WrapperElement = () => {
  return (
    <UseAnimation
      animation={heart}
      size={60}
      onClick={() => {
        // eslint-disable-next-line
        console.log('additional onClick cb is working');
      }}
      render={(eventProps, animationProps) => (
        <button style={{ padding: '20px' }} type="button" {...eventProps}>
          <div {...animationProps} />
        </button>
      )}
    />
  );
};

  5. Configure UseAnimations props

    master

    The UseAnimations component accepts several props to customize the appearance and behavior of the icon.

    PropDefaultDefinition
    animation/The animation file to use
    size24The animation size
    strokeColor'inherit'The animation stroke color
    fillColor''The animation fill color
    wrapperStyle{}Styles for the wrapper div
    pathCss''CSS string for the animation path element
    reversefalseSet to true when an element (like a checkbox) should be in the 'checked' state initially
    autoplayfalse*Whether the animation plays automatically (false except in animations like loading, etc.)
    loopfalse*Whether the animation loops (false except in animations like loading, etc.)
    options{}Custom options that override default ones
    speed1A number to determine the speed of lottie (1 is normal speed)

    *Note: autoplay and loop behavior depends on the specific animation type (e.g., loading animations).

  6. Access animation events via the render prop

    master
    If you use the render prop, you can access eventProps. These props include event handlers (like onClick) that are synchronized with the animation's state (e.g., whether it is playing, looping, or reversed). This is useful for building interactive components where the UI must react to the animation's lifecycle.

  7. Use the UseAnimations component

    master

    The UseAnimations component is the primary way to render Lottie-based animations in a React application. It manages the Lottie lifecycle (initialization and destruction), handles animation speed, and provides event hooks.

    By default, it renders a div container. However, you can use the render prop to provide a custom rendering function if you need to wrap the animation in specific UI elements.

  8. Available AnimationKey values

    master

    The AnimationKey type defines the set of supported icon identifiers available in the library. Use these keys to select specific animations.

    type AnimationKey =
  | 'activity'
  | 'airplay'
  | 'alertCircle'
  | 'alertOctagon'
  | 'alertTriangle'
  | 'archive'
  | 'arrowDown'
  | 'arrowDownCircle'
  | 'arrowLeftCircle'
  | 'arrowRightCircle'
  | 'arrowUp'
  | 'arrowUpCircle'
  | 'bookmark'
  | 'behance'
  | 'calendar'
  | 'checkBox'
  | 'checkmark'
  | 'codepen'
  | 'copy'
  | 'download'
  | 'dribbble'
  | 'edit'
  | 'error'
  | 'explore'
  | 'facebook'
  | 'folder'
  | 'github'
  | 'heart'
  | 'help'
  | 'home'
  | 'infinity'
  | 'info'
  | 'instagram'
  | 'linkedin'
  | 'loading'
  | 'loading2'
  | 'loading3'
  | 'lock'
  | 'mail'
  | 'maximizeMinimize'
  | 'maximizeMinimize2'
  | 'menu'
  | 'menu2'
  | 'menu3'
  | 'menu4'
  | 'microphone'
  | 'microphone2'
  | 'notification'
  | 'notification2'
  | 'playPause'
  | 'playPauseCircle'
  | 'plusToX'
  | 'pocket'
  | 'radioButton'
  | 'scrollDown'
  | 'searchToX'
  | 'settings'
  | 'settings2'
  | 'share'
  | 'skipBack'
  | 'skipForward'
  | 'star'
  | 'thumbUp'
  | 'toggle'
  | 'trash'
  | 'trash2'
  | 'twitter'
  | 'userMinus'
  | 'userPlus'
  | 'userX'
  | 'video'
  | 'video2'
  | 'visibility'
  | 'visibility2'
  | 'volume'
  | 'youtube'
  | 'youtube2'
  | 'zoomIn'
  | 'zoomOut';

  9. Available AnimationEffect types

    master

    When configuring how an animation responds to user interaction or playback, you can use one of the following AnimationEffect string literals:

    • CLICK_PLAY_AND_BACKWARDS: Plays the animation on click and then plays it in reverse.
    • HOVER_PLAY_AND_STOP: Plays the animation when hovered and stops at the end.
    • HOVER_PLAY_AND_BACKWARDS: Plays the animation on hover and then plays it in reverse.
    • CLICK_PLAY: Plays the animation once on click.
    • LOOP_PLAY: Continuously loops the animation.
    • CLICK_PLAY_AND_SEGMENTS: Plays specific segments of the animation on click.
    type AnimationEffect =
  | 'CLICK_PLAY_AND_BACKWARDS'
  | 'HOVER_PLAY_AND_STOP'
  | 'HOVER_PLAY_AND_BACKWARDS'
  | 'CLICK_PLAY'
  | 'LOOP_PLAY'
  | 'CLICK_PLAY_AND_SEGMENTS';