The manifest file allows the player to know what animations are contained inside it, how to play them and more. All of these settings are customizable by interacting with the DotLottie object and the LottieAnimations contained inside it.
Usage
React
For a browser environment we need to install dotlottie-js.
When used with getServerSideProps, we must return a serializable object. With this restriction, one use case for getServerSideProps could be to create a dotLottie from a URL, extract an animation from it and pass it to the frontend.
Run:
pnpm install @dotlottie/dotlottie-js
Code:
import { DotLottie } from'@dotlottie/dotlottie-js/node'exportasyncfunctiongetServerSideProps():Promise<Record<string,unknown>> {constdotlottie=newDotLottie(); dotlottie =awaitdotlottie.fromURL('https://x.lottie');let dotLottieJson =awaitdotlottie.getAnimation('...');if (dotLottieJson) dotLottieJson =awaitdotLottieJson.toJSON();return { props: { dotLottieJson } }}exportdefaultfunctionHome({ dotLottieJson }) {useEffect(() => {// Use the animation data however you likeconsole.log(dotLottieJson) }, [dotLottieJson])return (<>...</> )}
Server side
dotlottie-js can be used in APIs to return .lottieBuffers.
Use defensive programming techniques: Ensure type and range of input values, cast values to native representation whenever possible, etc.
Refrain from using external dependencies: Discuss before adding a dependency. Check with Bundlephobia for package size and dependencies when choosing one.
Use code formatting in the IDE using the given eslint+prettier configs.
Write tests to cover all functions and code branches with valid and invalid values.
Setting up
git clone https://github.com/LottieFiles/dotlottie-js
cd dotlottie-js
pnpm install