Lottie Player for Web by LottiePro
npm install @lottiepro-web/core
bash
# For React/Next.js
pnpm add @lottiepro-web/core @lottiepro-web/react
# For Vue
pnpm add @lottiepro-web/core @lottiepro-web/vue
`
## Quick Start 🚀
### React
`tsx
import { LottieComponent, useLottieControls } from '@lottiepro-web/react'
function App() {
const lottieRef = useLottieControls();
return (
<>
ref={lottieRef}
src="https://cdn.lottiepro.com/animation.json"
style={{ width: 400, height: 400 }}
loop={true}
onLoad={() => console.log('Loaded!')}
/>
>
);
}
`
### Next.js
`tsx
"use client"
import { LottieComponent, useLottieControls } from '@lottiepro-web/react';
function App() {
const lottieRef = useLottieControls();
return (
ref={lottieRef}
src="https://cdn.lottiepro.com/animation.json"
style={{ width: 400, height: 400 }}
loop={true}
/>
);
}
`
### Vue
`tsx
ref="lottieRef"
src="/animation.json"
:loop="true"
style="width: 400px; height: 400px"
@load="() => console.log('Loaded!')"
/>
`
## API Reference
### Properties
| Property | Type | Default | Description |
|------------|--------------------------|-----------|--------------------------------------------|
| src | string | object | required | Animation source URL or data object |
| loop | boolean | false | Whether to loop the animation |
| autoplay | boolean | true | Start animation immediately when loaded |
| renderer | 'svg' | 'canvas' | 'html' | 'svg' | Rendering method |
| speed | number | 1 | Animation playback speed |
### Events
| Event | Description |
|-------------|--------------------------------------------|
| onLoad | Fires when animation is loaded and ready |
| onError | Fires when an error occurs loading the animation |
| onComplete| Fires when animation completes playing |
| onFrame` | Fires on each frame update |