@lottiefiles/dotlottie-react - npm Package Compare versions

Comparing version 0.0.0-framer-20240122155350 to 0.0.0-framer-20240122163021

dist/dotlottie.d.ts

@@ -11,5 +11,6 @@ import { Config, DotLottie } from '@lottiefiles/dotlottie-web';
     dotLottieRefCallback?: RefCallback<DotLottie>;
+    playOnHover?: boolean;
 };
-declare const DotLottieReact: ({ autoplay, backgroundColor, data, dotLottieRefCallback, loop, mode, renderConfig, segments, speed, src, useFrameInterpolation, ...props }: DotLottieComponentProps) => JSX.Element;
+declare const DotLottieReact: ({ autoplay, backgroundColor, data, dotLottieRefCallback, loop, mode, playOnHover, renderConfig, segments, speed, src, useFrameInterpolation, ...props }: DotLottieComponentProps) => JSX.Element;
 
 export { type DotLottieComponentProps, DotLottieReact };

dist/use-dotlottie.d.ts

@@ -8,3 +8,5 @@ import { Config, DotLottie } from '@lottiefiles/dotlottie-web';
 
-type DotLottieConfig = Omit<Config, 'canvas'>;
+type DotLottieConfig = Omit<Config, 'canvas'> & {
+    playOnHover?: boolean;
+};
 interface UseDotLottieResult {
@@ -18,4 +20,4 @@ DotLottieComponent: (props: ComponentProps<'canvas'>) => JSX.Element;
 }
-declare const useDotLottie: (dotLottieConfig?: DotLottieConfig) => UseDotLottieResult;
+declare const useDotLottie: (config?: DotLottieConfig) => UseDotLottieResult;
 
 export { type DotLottieConfig, type UseDotLottieResult, useDotLottie };

package.json

 {
   "name": "@lottiefiles/dotlottie-react",
-  "version": "0.0.0-framer-20240122155350",
+  "version": "0.0.0-framer-20240122163021",
   "type": "module",
@@ -5,0 +5,0 @@ "description": "React wrapper around the dotlottie-web library",

README.md

@@ -23,2 +23,4 @@ # @lottiefiles/dotlottie-react
   * [DotLottieReactProps](#dotlottiereactprops)
+* [Custom Playback Controls](#custom-playback-controls)
+* [Listening to Events](#listening-to-events)
 * [Development](#development)
@@ -70,14 +72,19 @@ * [Setup](#setup)
 
-| Property name     | Type                  | Required | Default               | Description                                                                                                                            |
-| ----------------- | --------------------- | :------: | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| `autoplay`        | boolean               |          | false                 | Auto-starts the animation on load.                                                                                                     |
-| `loop`            | boolean               |          | false                 | Determines if the animation should loop.                                                                                               |
-| `src`             | string                |          | undefined             | URL to the animation data (`.json` or `.lottie`).                                                                                      |
-| `speed`           | number                |          | 1                     | Animation playback speed. 1 is regular speed.                                                                                          |
-| `data`            | string \| ArrayBuffer |          | undefined             | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.                                    |
-| `mode`            | string                |          | "forward"             | Animation play mode. Accepts "forward", "reverse", "bounce", "bounce-reverse".                                                         |
-| `backgroundColor` | string                |          | undefined             | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"),                            |
-| `segments`        | \[number, number]     |          | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. |
-| `renderConfig`    | RenderConfig          |          | `{}`                  | Configuration for rendering the animation.                                                                                             |
+The `DotLottieReactProps` extends the `HTMLCanvasElement` Props and accepts all the props that the `HTMLCanvasElement` accepts. In addition to that, it also accepts the following props:
 
+| Property name           | Type                                   | Required | Default               | Description                                                                                                                                                                                                                                        |   |
+| ----------------------- | -------------------------------------- | :------: | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
+| `autoplay`              | boolean                                |          | false                 | Auto-starts the animation on load.                                                                                                                                                                                                                 |   |
+| `loop`                  | boolean                                |          | false                 | Determines if the animation should loop.                                                                                                                                                                                                           |   |
+| `src`                   | string                                 |          | undefined             | URL to the animation data (`.json` or `.lottie`).                                                                                                                                                                                                  |   |
+| `speed`                 | number                                 |          | 1                     | Animation playback speed. 1 is regular speed.                                                                                                                                                                                                      |   |
+| `data`                  | string \| ArrayBuffer                  |          | undefined             | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.                                                                                                                                                |   |
+| `mode`                  | string                                 |          | "forward"             | Animation play mode. Accepts "forward", "reverse", "bounce", "bounce-reverse".                                                                                                                                                                     |   |
+| `backgroundColor`       | string                                 |          | undefined             | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"),                                                                                                                                        |   |
+| `segments`              | \[number, number]                      |          | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.                                                                                                             |   |
+| `renderConfig`          | RenderConfig                           |          | `{}`                  | Configuration for rendering the animation.                                                                                                                                                                                                         |   |
+| `playOnHover`           | boolean                                |          | false                 | Determines if the animation should play on mouse hover and pause on mouse out.                                                                                                                                                                     |   |
+| `dotLottieRefCallback`  | React.RefCallback\<DotLottie \|  null> |          | undefined             | Callback function that receives a reference to the [`dotLottie`](../web/README.md) web player instance.                                                                                                                                            |   |
+| `useFrameInterpolation` | boolean                                |          | true                  | Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true. |   |
+
 #### RenderConfig
@@ -91,2 +98,133 @@
 
+## Custom Playback Controls
+
+`DotLottieReact` 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/README.md#apis) web player instance. This instance can be used to control the playback of the animation using the methods exposed by the [`dotLottie`](../web/README.md#methods) web player instance.
+
+Here is an example:
+
+```js
+import React from 'react';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+
+const App = () => {
+  const [dotLottie, setDotLottie] = React.useState(null);
+
+  const dotLottieRefCallback = (dotLottie) => {
+    setDotLottie(dotLottie);
+  };
+
+  function play(){
+    if(dotLottie){
+      dotLottie.play();
+    }
+  }
+
+  function pause(){
+    if(dotLottie){
+      dotLottie.pause();
+    }
+  }
+
+  function stop(){
+    if(dotLottie){
+      dotLottie.stop();
+    }
+  }
+
+  function seek(){
+    if(dotLottie){
+      dotLottie.setFrame(30);
+    }
+  }
+
+  return (
+    <DotLottieReact
+      src="path/to/animation.lottie"
+      loop
+      autoplay
+      dotLottieRefCallback={dotLottieRefCallback}
+    />
+    <div>
+      <button onClick={play}>Play</button>
+      <button onClick={pause}>Pause</button>
+      <button onClick={stop}>Stop</button>
+      <button onClick={seek}>Seek to frame no. 30</button>
+    </div>
+  );
+};
+```
+
+You can find the list of methods that can be used to control the playback of the animation [here](../web/README.md#methods).
+
+## Listening to Events
+
+`DotLottieReact` component can receive a `dotLottieRefCallback` prop that can be used to get a reference to the [`dotLottie`](../web/README.md#apis) web player instance. This reference can be used to listen to player events emitted by the [`dotLottie`](../web/README.md#events) web instance.
+
+Here is an example:
+
+```js
+import React from 'react';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+
+const App = () => {
+  const [dotLottie, setDotLottie] = React.useState(null);
+
+  React.useEffect(() => {
+
+    // This function will be called when the animation starts playing.
+    function onPlay() {
+      console.log('Animation start playing');
+    }
+
+    // This function will be called when the animation is paused.
+    function onPause() {
+      console.log('Animation paused');
+    }
+
+    // This function will be called when the animation is completed.
+    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);
+    }
+
+    return () => {
+      // Remove event listeners when the component is unmounted.
+      if (dotLottie) {
+        dotLottie.addEventListener('play', onPlay);
+        dotLottie.addEventListener('pause', onPause);
+        dotLottie.addEventListener('complete', onComplete);
+        dotLottie.addEventListener('frame', onFrameChange);
+      }
+    };
+  }, [dotLottie]);
+
+
+  const dotLottieRefCallback = (dotLottie) => {
+    setDotLottie(dotLottie);
+  };
+
+  return (
+    <DotLottieReact
+      src="path/to/animation.lottie"
+      loop
+      autoplay
+      dotLottieRefCallback={dotLottieRefCallback}
+    />
+  );
+};
+```
+
+[dotLottie](../web/README.md#apis) instance exposes multiple events that can be listened to. You can find the list of events [here](../web/README.md#events).
+
 ## Development
@@ -93,0 +231,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

506335

increased by3.13%

Number of package files

12

increased by50%

Lines of code

15737

increased by1.82%

Number of lines in readme file

246

increased by127.78%

Worsened metrics

Published versions last months

6

decreased by-14.29%

No dependency changes