dotlottie-solid v1.2.0

dotlottie-solid

Contents

• Introduction
• Live Examples
• Installation
• Usage
• APIs
  • DotLottieSolidProps
• Custom Playback Controls
• Listening to Events
• Development

Introduction

An unofficial Solid library for rendering lottie and dotLottie animations in the browser.\ Use lotties in your solidjs apps, using dotlottie-web under the hood. Thank you @LottieFiles for creating such amazing library ❤️

Now let's see how to use dotLottie in a solidjs app.

Live Examples

• Get Started
• Custom Playback Controls

Installation

npm install dotlottie-solid

Usage

import type { Component } from 'solid-js';
import { DotLottieSolid } from 'dotlottie-solid';

const App: Component = () => {
  return (
    <DotLottieSolid
      src="path/to/animation.lottie"
      loop
      autoplay
    />
  );
};

APIs

DotLottieSolidProps

The DotLottieSolidProps extends the HTMLCanvasElement Props and accepts all the props that the HTMLCanvasElement accepts. In addition to that, it also accepts the following props:

RenderConfig

The renderConfig object accepts the following properties:

Custom Playback Controls

DotLottieSolid component makes it easy to build custom playback controls for the animation. It exposes a dotLottieRefCallback prop that can be used to get a reference to the dotLottie web player instance. This instance can be used to control the playback of the animation using the methods exposed by the dotLottie web player instance.

Here is an example:

import Solid from 'solidjs';
import { type DotLottie, DotLottieSolid } from 'dotlottie-solid';

const App = () => {
  const [dotLottie, setDotLottie] = Solid.createSignal<DotLottie | null>(null);

  function play() {
    dotLottie()?.play();
  }

  function pause() {
    dotLottie()?.pause();
  }

  function stop() {
    dotLottie()?.stop();
  }

  return (
    <DotLottieSolid
      src="path/to/animation.lottie"
      loop
      autoplay
      dotLottieRefCallback={setDotLottie}
    />
    <div>
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
};

You can find the list of methods that can be used to control the playback of the animation here.

Listening to Events

DotLottieSolid component can receive a dotLottieRefCallback prop that can be used to get a reference to the dotLottie web player instance. This reference can be used to listen to player events emitted by the dotLottie web instance.

Here is an example:

import Solid from 'solidjs';
import { type DotLottie, DotLottieSolid } from 'dotlottie-solid';

const App = () => {
  const [dotLottie, setDotLottie] = Solid.createSignal<DotLottie | null>(null);

  Solid.createEffect(() => {
    function onPlay() {
      console.log('Animation start playing');
    }

    function onPause() {
      console.log('Animation paused');
    }

    function onComplete() {
      console.log('Animation completed');
    }

    function onFrameChange({ currentFrame }) {
      console.log('Current frame: ', currentFrame);
    }

    // Listen to events emitted by the DotLottie instance when it is available.
    if (dotLottie()) {
      dotLottie().addEventListener('play', onPlay);
      dotLottie().addEventListener('pause', onPause);
      dotLottie().addEventListener('complete', onComplete);
      dotLottie().addEventListener('frame', onFrameChange);
    }
  });

  Solid.onCleanup(() => {
    // Remove event listeners when the component is unmounted.
    if (dotLottie()) {
      dotLottie().removeEventListener('play', onPlay);
      dotLottie().removeEventListener('pause', onPause);
      dotLottie().removeEventListener('complete', onComplete);
      dotLottie().removeEventListener('frame', onFrameChange);
    }
  });

  return (
    <DotLottieSolid
      dotLottieRefCallback={(v) => setDotLottie(v)}
      src="path/to/animation.lottie"
      loop
      autoplay
    />
  );
};

dotLottie instance exposes multiple events that can be listened to. You can find the list of events here.

Development

# use latest pnpm package manager version
pnpm install
pnpm dev
# build
pnpm build