react-useanimations 2.10.0 → 3.0.0-beta.2

package/index.d.ts

@@ -1,19 +1,356 @@
-import React, { ReactElement } from 'react';
-import type { AnimationConfig } from 'lottie-web';
-import type { Animation } from './utils';
-declare type Props = {
+import React from 'react';
+import { AnimationConfigWithData } from 'lottie-web';
+
+declare const interactions: {
+    readonly activity: "loop";
+    readonly airplay: "loop";
+    readonly alertCircle: "loop";
+    readonly alertOctagon: "loop";
+    readonly alertTriangle: "loop";
+    readonly alignCenter: "click-replay";
+    readonly alignJustify: "click-replay";
+    readonly alignLeft: "click-replay";
+    readonly alignRight: "click-replay";
+    readonly anchor: "hover-replay";
+    readonly aperture: "hover-replay";
+    readonly archive: "hover";
+    readonly arrowDown: "loop";
+    readonly arrowDownCircle: "click-replay";
+    readonly arrowDownLeft: "hover-replay";
+    readonly arrowDownRight: "hover-replay";
+    readonly arrowLeft: "hover-replay";
+    readonly arrowLeftCircle: "click-replay";
+    readonly arrowRight: "hover-replay";
+    readonly arrowRightCircle: "click-replay";
+    readonly arrowUp: "loop";
+    readonly arrowUpCircle: "click-replay";
+    readonly arrowUpLeft: "hover-replay";
+    readonly arrowUpRight: "hover-replay";
+    readonly atSign: "hover-replay";
+    readonly award: "hover-replay";
+    readonly barChart: "hover-replay";
+    readonly barChart2: "hover-replay";
+    readonly battery: "hover-replay";
+    readonly batteryCharging: "hover-replay";
+    readonly behance: "hover-loop";
+    readonly bluetooth: "hover-replay";
+    readonly bold: "click-replay";
+    readonly book: "hover-replay";
+    readonly bookmark: "click-toggle";
+    readonly bookOpen: "hover-replay";
+    readonly box: "hover-replay";
+    readonly briefcase: "hover-replay";
+    readonly calendar: "hover";
+    readonly camera: "click-replay";
+    readonly cameraOff: "click-toggle";
+    readonly cast: "hover-replay";
+    readonly check: "click-replay";
+    readonly checkBox: "click-toggle";
+    readonly checkCircle: "click-replay";
+    readonly checkmark: "loop";
+    readonly chevronDown: "hover-replay";
+    readonly chevronLeft: "click-replay";
+    readonly chevronRight: "click-replay";
+    readonly chevronsDown: "hover-replay";
+    readonly chevronsLeft: "hover-replay";
+    readonly chevronsRight: "hover-replay";
+    readonly chevronsUp: "hover-replay";
+    readonly chevronUp: "hover-replay";
+    readonly chrome: "hover-replay";
+    readonly circle: "hover-replay";
+    readonly clipboard: "hover-replay";
+    readonly clock: "hover-replay";
+    readonly cloud: "hover-loop";
+    readonly cloudDrizzle: "hover-replay";
+    readonly cloudLightning: "hover-replay";
+    readonly cloudOff: "click-toggle";
+    readonly cloudRain: "hover-replay";
+    readonly cloudSnow: "hover-replay";
+    readonly code: "hover-replay";
+    readonly codepen: "hover-loop";
+    readonly codesandbox: "hover-replay";
+    readonly coffee: "hover-replay";
+    readonly columns: "hover-replay";
+    readonly command: "hover-replay";
+    readonly copy: "hover";
+    readonly cornerDownLeft: "hover-replay";
+    readonly cornerDownRight: "hover-replay";
+    readonly cornerLeftDown: "hover-replay";
+    readonly cornerLeftUp: "hover-replay";
+    readonly cornerRightDown: "hover-replay";
+    readonly cornerRightUp: "hover-replay";
+    readonly cornerUpLeft: "hover-replay";
+    readonly cornerUpRight: "hover-replay";
+    readonly cpu: "hover-replay";
+    readonly creditCard: "hover-replay";
+    readonly crop: "click-replay";
+    readonly crosshair: "hover-replay";
+    readonly database: "hover-replay";
+    readonly delete: "click-replay";
+    readonly disc: "hover-replay";
+    readonly divide: "hover-replay";
+    readonly divideCircle: "hover-replay";
+    readonly divideSquare: "hover-replay";
+    readonly dollarSign: "hover-replay";
+    readonly download: "click-replay";
+    readonly download2: "click-replay";
+    readonly downloadCloud: "click-replay";
+    readonly dribbble: "hover-loop";
+    readonly droplet: "hover-replay";
+    readonly edit: "hover";
+    readonly edit2: "click-replay";
+    readonly edit3: "click-replay";
+    readonly error: "loop";
+    readonly explore: "hover";
+    readonly externalLink: "hover-replay";
+    readonly facebook: "hover-loop";
+    readonly fastForward: "hover-replay";
+    readonly figma: "hover-replay";
+    readonly file: "hover-replay";
+    readonly fileMinus: "click-replay";
+    readonly filePlus: "click-replay";
+    readonly fileText: "hover-replay";
+    readonly film: "hover-replay";
+    readonly filter: "click-replay";
+    readonly flag: "hover-loop";
+    readonly folder: "hover";
+    readonly folderMinus: "click-replay";
+    readonly folderPlus: "click-replay";
+    readonly framer: "hover-replay";
+    readonly frown: "hover-replay";
+    readonly gift: "hover-replay";
+    readonly gitBranch: "hover-replay";
+    readonly gitCommit: "hover-replay";
+    readonly github: "hover-loop";
+    readonly gitlab: "hover-replay";
+    readonly gitMerge: "hover-replay";
+    readonly gitPullRequest: "hover-replay";
+    readonly globe: "hover-loop";
+    readonly grid: "hover-replay";
+    readonly hardDrive: "hover-replay";
+    readonly hash: "hover-replay";
+    readonly headphones: "hover-replay";
+    readonly heart: "click-toggle";
+    readonly heart2: "click-replay";
+    readonly help: "loop";
+    readonly hexagon: "hover-replay";
+    readonly home: "hover";
+    readonly image: "hover-replay";
+    readonly inbox: "hover-replay";
+    readonly infinity: "loop";
+    readonly info: "hover";
+    readonly instagram: "hover";
+    readonly italic: "click-replay";
+    readonly key: "hover-replay";
+    readonly layers: "hover-replay";
+    readonly layout: "hover-replay";
+    readonly lifeBuoy: "hover-replay";
+    readonly link: "click-replay";
+    readonly link2: "click-replay";
+    readonly linkedin: "hover-loop";
+    readonly list: "hover-replay";
+    readonly loading: "loop";
+    readonly loading2: "loop";
+    readonly loading3: "loop";
+    readonly loading4: "loop";
+    readonly lock: "click-toggle";
+    readonly logIn: "click-replay";
+    readonly logOut: "click-replay";
+    readonly mail: "hover";
+    readonly map: "hover-replay";
+    readonly mapPin: "hover-replay";
+    readonly maximize2: "hover-replay";
+    readonly maximizeMinimize: "click-toggle";
+    readonly maximizeMinimize2: "click-toggle";
+    readonly meh: "hover-replay";
+    readonly menu: "click-toggle";
+    readonly menu2: "click-toggle";
+    readonly menu3: "click-toggle";
+    readonly menu4: "click-toggle";
+    readonly messageCircle: "hover-replay";
+    readonly messageSquare: "hover-replay";
+    readonly micOff: "click-toggle";
+    readonly microphone: "click-toggle";
+    readonly microphone2: "click-toggle";
+    readonly minimize2: "hover-replay";
+    readonly minus: "click-replay";
+    readonly minusCircle: "click-replay";
+    readonly minusSquare: "click-replay";
+    readonly monitor: "hover-replay";
+    readonly moon: "hover-replay";
+    readonly moreHorizontal: "loop";
+    readonly moreVertical: "loop";
+    readonly mousePointer: "click-replay";
+    readonly move: "hover-replay";
+    readonly music: "hover-replay";
+    readonly navigation: "hover-replay";
+    readonly navigation2: "hover-replay";
+    readonly notification: "click-toggle";
+    readonly notification2: "click-toggle";
+    readonly notification3: "loop";
+    readonly notification4: "loop";
+    readonly octagon: "hover-replay";
+    readonly package: "hover-replay";
+    readonly paperclip: "hover-replay";
+    readonly penTool: "hover-replay";
+    readonly percent: "hover-replay";
+    readonly phone: "click-replay";
+    readonly phoneCall: "click-replay";
+    readonly phoneForwarded: "hover-replay";
+    readonly phoneIncoming: "hover-replay";
+    readonly phoneMissed: "hover-replay";
+    readonly phoneOff: "click-toggle";
+    readonly phoneOutgoing: "hover-replay";
+    readonly pieChart: "hover-replay";
+    readonly playPause: "click-toggle";
+    readonly playPauseCircle: "click-toggle";
+    readonly plusCircle: "click-replay";
+    readonly plusSquare: "click-replay";
+    readonly plusToX: "click-toggle";
+    readonly pocket: "hover-loop";
+    readonly power: "click-replay";
+    readonly printer: "click-replay";
+    readonly radio: "hover-replay";
+    readonly radioButton: "click-toggle";
+    readonly refresh: "click-replay";
+    readonly refresh2: "click-replay";
+    readonly refreshCcw: "click-replay";
+    readonly repeat: "click-replay";
+    readonly rewind: "hover-replay";
+    readonly rotateCcw: "click-replay";
+    readonly rotateCw: "click-replay";
+    readonly rss: "hover-replay";
+    readonly save: "click-replay";
+    readonly scissors: "click-replay";
+    readonly scrollDown: "loop";
+    readonly searchToX: "click-toggle";
+    readonly send: "click-replay";
+    readonly server: "hover-replay";
+    readonly settings: "hover";
+    readonly settings2: "click-toggle";
+    readonly share: "hover";
+    readonly shield: "hover-replay";
+    readonly shieldOff: "click-toggle";
+    readonly shoppingBag: "hover-replay";
+    readonly shoppingCart: "click-replay";
+    readonly shuffle: "click-replay";
+    readonly sidebar: "hover-replay";
+    readonly skipBack: "click-replay";
+    readonly skipForward: "click-replay";
+    readonly slack: "hover-replay";
+    readonly slash: "hover-replay";
+    readonly smartphone: "hover-replay";
+    readonly smile: "hover-replay";
+    readonly speaker: "hover-replay";
+    readonly square: "hover-replay";
+    readonly star: "click-toggle";
+    readonly stopCircle: "click-replay";
+    readonly sun: "hover-replay";
+    readonly sunrise: "hover-replay";
+    readonly sunset: "hover-replay";
+    readonly table: "hover-replay";
+    readonly tablet: "hover-replay";
+    readonly tag: "hover-replay";
+    readonly target: "hover-replay";
+    readonly terminal: "loop";
+    readonly thermometer: "hover-replay";
+    readonly thumbsDown: "click-replay";
+    readonly thumbUp: "click-toggle";
+    readonly toggle: "click-toggle";
+    readonly tool: "hover-replay";
+    readonly trash: "hover";
+    readonly trash2: "hover";
+    readonly trello: "hover-replay";
+    readonly trendingDown: "hover-replay";
+    readonly trendingUp: "hover-replay";
+    readonly triangle: "hover-replay";
+    readonly truck: "hover-replay";
+    readonly tv: "hover-replay";
+    readonly twitch: "hover-replay";
+    readonly twitter: "hover-loop";
+    readonly twitterX: "hover-replay";
+    readonly type: "click-replay";
+    readonly umbrella: "hover-replay";
+    readonly underline: "click-replay";
+    readonly upload: "click-replay";
+    readonly uploadCloud: "click-replay";
+    readonly user: "hover-replay";
+    readonly userCheck: "click-replay";
+    readonly userMinus: "hover";
+    readonly userPlus: "hover";
+    readonly users: "hover-replay";
+    readonly userX: "hover";
+    readonly video: "click-toggle";
+    readonly video2: "click-toggle";
+    readonly videoOff: "click-toggle";
+    readonly visibility: "click-toggle";
+    readonly visibility2: "click-toggle";
+    readonly visibility3: "click-toggle";
+    readonly voicemail: "hover-replay";
+    readonly volume: "click-toggle";
+    readonly watch: "hover-replay";
+    readonly wifi: "hover-replay";
+    readonly wifiOff: "click-toggle";
+    readonly wind: "hover-replay";
+    readonly xOctagon: "click-replay";
+    readonly xSquare: "click-replay";
+    readonly youtube: "hover";
+    readonly youtube2: "hover";
+    readonly zap: "hover-replay";
+    readonly zapOff: "click-toggle";
+    readonly zoomIn: "hover";
+    readonly zoomOut: "hover";
+};
+type AnimationKey = keyof typeof interactions;
+
+/**
+ * How an icon reacts to the user, matching the `interaction` field of the useAnimations catalog.
+ * - `loop`: plays continuously.
+ * - `click-toggle`: toggles between two states on click (forward, then backward).
+ * - `click-replay`: replays from the start on every click.
+ * - `hover`: plays forward on mouse enter and backward on mouse leave.
+ * - `hover-loop`: loops while hovered and stops on mouse leave.
+ * - `hover-replay`: plays once from the start on mouse enter.
+ */
+type Interaction = 'loop' | 'click-toggle' | 'click-replay' | 'hover' | 'hover-loop' | 'hover-replay';
+type Animation = {
+    animationData: unknown;
+    animationKey: AnimationKey;
+};
+
+type MouseHandler = (event: React.MouseEvent<HTMLElement>) => void;
+type EventProps = {
+    onClick: MouseHandler;
+    onMouseEnter: MouseHandler;
+    onMouseLeave: MouseHandler;
+};
+type AnimationProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref: React.Ref<HTMLDivElement>;
+    style: React.CSSProperties;
+};
+type OwnProps = {
+    /** Animation imported from `react-useanimations/lib/<name>`. */
     animation: Animation;
+    /** Overrides the icon's default interaction, e.g. `'hover'` for an icon that normally plays on click. */
+    interaction?: Interaction;
+    /** For `click-toggle` icons: `true` shows the end state (e.g. a checked checkbox). Can be controlled. */
     reverse?: boolean;
     strokeColor?: string;
     fillColor?: string;
+    /** Extra CSS declarations applied to every path of the icon. */
     pathCss?: string;
-    options?: Partial<AnimationConfig>;
+    /** Extra lottie-web options, applied when the animation loads. */
+    options?: Partial<AnimationConfigWithData<'svg'>>;
     size?: number;
-    loop?: AnimationConfig['loop'];
-    autoplay?: AnimationConfig['autoplay'];
+    loop?: boolean | number;
+    autoplay?: boolean;
     speed?: number;
     wrapperStyle?: React.CSSProperties;
-    render?: (eventProps: any, animationProps: any) => ReactElement;
-} & React.HTMLProps<HTMLDivElement>;
-declare const UseAnimations: React.FC<Props>;
-export default UseAnimations;
+    /** Renders a custom wrapper: spread `eventProps` on the interactive element, `animationProps` on a div. */
+    render?: (eventProps: EventProps, animationProps: AnimationProps) => React.ReactElement;
+};
+type UseAnimationsProps = OwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof OwnProps>;
+
+declare const UseAnimations: (props: UseAnimationsProps) => React.ReactElement;
+
+export { type Animation, type AnimationKey, type AnimationProps, type EventProps, type Interaction, type UseAnimationsProps, UseAnimations as default };