# lottie-react

> Lottie animations in React: one component for the easy path, the whole engine when you need control.

## Docs

- [Overview](https://lottiereact.com/docs.md): Lottie animations in React: one component for the easy path, the whole engine when you need control.
- [Configuring the engine](https://lottiereact.com/docs/animation/configuring-the-engine.md): The two settings that belong to the engine rather than to one animation.
- [Driving with props](https://lottiereact.com/docs/animation/driving-with-props.md): Change a running animation from React state, and try every reactive prop in the playground.
- [Loading and errors](https://lottiereact.com/docs/animation/loading-and-errors.md): Show something while an animation loads, and a way back when it fails.
- [Placing it yourself](https://lottiereact.com/docs/animation/placing-it-yourself.md): Take over the layout with children, and change the element with as.
- [Refs and handles](https://lottiereact.com/docs/animation/refs-and-handles.md): ref reaches the element, lottieRef reaches the animation.
- [Renderers and the smaller builds](https://lottiereact.com/docs/animation/renderers-and-smaller-builds.md): Choose between svg, canvas and html, or ship a smaller engine.
- [Rendering](https://lottiereact.com/docs/animation/rendering.md): Load an animation from a file or a URL, start it, repeat it, and size it.
- [Seeking and segments](https://lottiereact.com/docs/animation/seeking-and-segments.md): Move the playhead, play part of the file, and wire up a scrub gesture.
- [Styling](https://lottiereact.com/docs/animation/styling.md): Your styles always win, on an element that behaves like any other.
- [The instance](https://lottiereact.com/docs/animation/the-instance.md): Everything useLottie hands back: values, commands, and subscriptions.
- [Basics](https://lottiereact.com/docs/examples/basics.md): Copy-ready starting points: play, size, drive, place.
- [Compositions](https://lottiereact.com/docs/examples/compositions.md): Larger pieces built from the same parts.
- [Interactions](https://lottiereact.com/docs/examples/interactions.md): Hover, click and state recipes, ready to take.
- [First animation](https://lottiereact.com/docs/get-started/first-animation.md): Play a Lottie file with the component, then with the hook.
- [Installation](https://lottiereact.com/docs/get-started/installation.md): Install lottie-react, and what comes with it.
- [How interactions work](https://lottiereact.com/docs/interactions/how-interactions-work.md): One wrapper attaches behaviours to any number of animations.
- [In view](https://lottiereact.com/docs/interactions/in-view.md): Play while the animation is on screen.
- [Scroll scrubbing](https://lottiereact.com/docs/interactions/scroll-scrubbing.md): The scroll position drives the playhead.
- [Writing your own](https://lottiereact.com/docs/interactions/writing-your-own.md): An interaction is a factory returning attach and options.
- [Migration from v2](https://lottiereact.com/docs/migration.md): Every v2 surface, and where it went in v3.
- [The control bar](https://lottiereact.com/docs/player/control-bar.md): A full transport bar in one component, drawn in your page's own colors.
- [Fullscreen and the keyboard](https://lottiereact.com/docs/player/fullscreen-and-keyboard.md): Fill the screen from the bar or from three keys, on either path.
- [configureLottie](https://lottiereact.com/docs/reference/configure-lottie.md): The engine's global settings, and when they apply.
- [Interactions API](https://lottiereact.com/docs/reference/interactions.md): The wrapper, the hook, the two factories, and the contract for yours.
- [Lottie, LottieSvg and LottieLight](https://lottiereact.com/docs/reference/lottie.md): The three components, and every prop of their own.
- [LottieControls](https://lottiereact.com/docs/reference/lottie-controls.md): The transport bar, and the two props it takes.
- [LottieDisplay](https://lottiereact.com/docs/reference/lottie-display.md): The element the animation draws inside, for layouts you own.
- [LottieLoading and LottieError](https://lottiereact.com/docs/reference/overlays.md): The two overlays, their props, and the loading overlay's knobs.
- [The stylesheet contract](https://lottiereact.com/docs/reference/stylesheet.md): The class names, keyframes and custom properties a stylesheet can rely on.
- [useLottie and the instance](https://lottiereact.com/docs/reference/use-lottie.md): The four hooks, the instance's members, and what the handle keeps.
- [Overview](https://lottiereact.com/docs/v2.md): lottie-react v2, the previous major.
- [API reference](https://lottiereact.com/docs/v2/api.md): Every export of lottie-react v2, with its props, methods and options.