# React Player
React component for rendering .lottie and .json animations. Wraps the dotLottie web player with React props, ref access, and event callbacks.

To add Lottie animations to a React app, use `@lottiefiles/dotlottie-react` — a React component that renders `.lottie` and `.json` animations. It wraps the core [dotLottie web player](/en/runtimes/distributions/js/v0.x) and exposes React-specific props, ref-based instance access, and event callbacks.

The current version is [v0.x](/en/runtimes/distributions/react/v0.x).

<Grid columns="2">
  <Feature title="Getting started" icon="PiRocketLaunch" href="/en/runtimes/distributions/react/v0.x">
    Install the component and render your first animation.
  </Feature>

  <Feature title="Examples" icon="PiWrench" href="/en/runtimes/distributions/react/v0.x/examples">
    Build playback controls and listen to player events.
  </Feature>

  <Feature title="Props reference" icon="PiTable" href="/en/runtimes/distributions/react/v0.x/props-reference">
    Every prop the DotLottieReact component accepts.
  </Feature>

  <Feature title="API reference" icon="PiCode" href="/en/runtimes/distributions/react/v0.x/api-reference">
    Worker component, WASM configuration, and player instance access.
  </Feature>
</Grid>