@furystack/shades-lottie

@furystack/shades-lottie

Lottie animation player wrapper for FuryStack Shades.

This package provides TypeScript JSX type definitions for the lottie-player web component, allowing you to use Lottie animations in your Shades applications with full type safety.

Installation

npm install @furystack/shades-lottie
# or
yarn add @furystack/shades-lottie

You also need to include the lottie-player library in your application. Add it to your HTML:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Usage

Import the package to register the JSX types, then use the lottie-player element in your components:

import '@furystack/shades-lottie'
import { Shade, createComponent } from '@furystack/shades'

const MyComponent = Shade({
  customElementName: 'my-animation',
  render: () => (
    <lottie-player
      src="https://assets.lottiefiles.com/packages/lf20_example.json"
      autoplay
      loop
      style={{ width: '300px', height: '300px' }}
    />
  ),
})

Props

The lottie-player element accepts the following props: