Unique identifier conflict in monorepo with multiple Lottie animations

[Gregory-Gerard]

First off, thanks for this awesome library.

Issue

I stumbled upon an interesting edge case that I think could be valuable to document. It's not a bug in lottie-react or lottie-web, but rather a gotcha when using Lottie in a specific setup.

Setup

• Project structure: Monorepo
• Multiple applications/packages using lottie-react
• Two Lottie animations on the same page, coming from different packages

Problem

The animations had clipPath elements with identical identifiers (__lottie_element_X). This caused the latter animation to be "cut off" as its clipPath was overwritten by the first one.

Investigation

Digging into the lottie-web source, I found that unique identifiers are generated using a simple increment:
https://github.com/airbnb/lottie-web/blob/0d658b34c40d4e81eafdccbf698815346454a899/player/js/utils/common.js#L117-L123

Solution

Luckily, lottie-web provides a method to customize the prefix (and lottie-react exports LottiePlayer from lottie-web), which solves this issue. Here's a quick example:

import Lottie, { LottiePlayer } from 'lottie-react';
import animationData from '@assets/lottie/animation.json';

LottiePlayer.setIDPrefix('crm');

export default function MyComponent() {
  return <Lottie animationData={animationData} />;
}

I think this piece of code would be better placed in an index.ts, given that IDPrefix is a global variable, but this is an example. This would avoid duplicating the code and having multiple identifiers that could conflict in the same package.

Could the documentation be improved in this direction? If so, I could make a PR.

Thank you in advance!