react-useanimations 2.0.9-RC → 2.0.9-RC1

package/README.md

@@ -1,110 +0,0 @@
-## React UseAnimations Icons
-
-[![npm version](https://img.shields.io/npm/v/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations) [![npm downloads](https://img.shields.io/npm/dm/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations)
-
-#### What is react-useanimations?
-
-React-useanimations is a collection of free animated open source icons for React.js.
-
-#### Collection
-
-[https://react.useanimations.com](https://react.useanimations.com/) and play with examples or visit our [Storybook](https://useanimations.github.io/react-useanimations/)
-
-![](useanimations-preview.gif)
-
-### Installation
-
-Using Yarn:
-
-```
-yarn add react-useanimations
-```
-
-or using NPM:
-
-```
-npm install -S react-useanimations
-```
-
-### Usage
-If you still need to use v1, please refer to this README instead - [react-useanimations@v1](https://github.com/useAnimations/react-useanimations/blob/master/README_v1.md)
-
-Basic usage
-```javascript
-import React from 'react';
-import UseAnimations from 'react-useanimations';
-// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
-import github from 'react-useanimations/lib/github'
-
-const App = () => <UseAnimations animation={github} />;
-
-export default App;
-```
-
-Icons can be configured with inline props:
-
-```javascript
-<UseAnimations animation={github} size={56} wrapperStyle={{ padding: 100 }} />
-```
-
-These props are available:
-| Prop           | Default      | Definition   |
-| :------------- | :----------: | -----------: |
-| animation   | / | animation file |
-|  size | `24`   | animation size    |
-|  strokeColor | `'inherit'`   | animation stroke color |
-|  fillColor   | `''`          | animation fill color
-|  wrapperStyle | `{}` | wrapper div styles |
-|  pathCss | `''` | css string for the animation path element |
-|  reverse | `false` | assing to `true` when eg. checkbox should be checked initally |
-|  autoplay | `false`* | false except in animations like loading etc. |
-|  loop | `false`* | false except in animations like loading etc. |
-|  options | `{}` | provide any other custom options which will override the default ones |
-|  speed | `1` | a number to determine the speed of lottie(1 is normal speed) |
-
-<br />
-Controlled checkbox example  
-
-```javascript
-export const RadioButton = () => {
-  // JUST EXAMPLE - THIS PART OF THE STATE WILL PROBABLY COME FROM A PARENT FORM COMPONENT
-  const [checked, setChecked] = useState(true);
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <span>radioButton</span>
-      <UseAnimation
-        reverse={checked}
-        onClick={() => {
-          setChecked(!checked);
-        }}
-        size={40}
-        wrapperStyle={{ marginTop: '5px' }}
-        animation={radioButton}
-      />
-    </div>
-  );
-};
-```
-
-Animation wrapped in element (use render prop).
-```javascript
-export const WrapperElement = () => {
-  return (
-    <UseAnimation
-      animation={heart}
-      size={60}
-      onClick={() => {
-        // eslint-disable-next-line
-        console.log('additional onClick cb is working');
-      }}
-      render={(eventProps, animationProps) => (
-        <button style={{ padding: '20px' }} type="button" {...eventProps}>
-          <div {...animationProps} />
-        </button>
-      )}
-    />
-  );
-};
-```
- Note that `eventProps` consists of `onClick`, `mouseOver` and other DOM events which you probably want to assign to your wrapping element (e.g. Button) and `animationProps` consist of an actual animation which you should spread inside a simple `<div>`   

package/README_v1.md

@@ -1,46 +0,0 @@
-## React UseAnimations Icons
-
-[![npm version](https://img.shields.io/npm/v/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations) [![npm downloads](https://img.shields.io/npm/dm/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations)
-
-#### What is react-useanimations?
-
-React-useanimations is a collection of free animated open source icons for React.js.
-
-#### Collection
-
-[https://react.useanimations.com](https://react.useanimations.com/) and play with examples.
-
-![](useanimations-preview.gif)
-
-### Installation
-
-Using Yarn:
-
-```
-yarn add react-useanimations
-```
-
-or using NPM:
-
-```
-npm install react-useanimations
-```
-
-### Usage
-This is README for v1, consider upgrading to v2, it will improve your performance - [react-useanimations@v1](https://github.com/useAnimations/react-useanimations/blob/master/README.md)
-
-Basic Usage
-```javascript
-import React from 'react';
-import UseAnimations from 'react-useanimations';
-
-const App = () => <UseAnimations animationKey="github" />;
-
-export default App;
-```
-
-Icons can be configured with inline props:
-
-```javascript
-<UseAnimations animationKey="alert" size={56} style={{ padding: 100 }} />
-```

package/src/index.tsx

@@ -1,177 +0,0 @@
-/* eslint-disable react/require-default-props */
-import React, { useState, useEffect, useRef, ReactElement } from 'react';
-// UNFORTUNATELY WHEN LIGHT VERSION IS USED, SOME ANIMATIONS ARE NOT WORKING AS EXPECTED
-// import lottie from 'lottie-web/build/player/lottie_light';
-import lottie from 'lottie-web';
-import type { AnimationItem, AnimationConfigWithData, AnimationConfig } from 'lottie-web';
-
-import { getEffect, getEvents } from './utils';
-import type { Animation, AnimationEffect } from './utils';
-
-const getRandomId = (key: Animation['animationKey']) =>
-  `${key}_i${Math.floor(Math.random() * 10000 + 1)}`;
-
-type Props = {
-  animation: Animation;
-  reverse?: boolean;
-  strokeColor?: string;
-  fillColor?: string;
-  pathCss?: string;
-  options?: Partial<AnimationConfig>;
-  size?: number;
-  loop?: AnimationConfig['loop'];
-  autoplay?: AnimationConfig['autoplay'];
-  speed?: number;
-  wrapperStyle?: React.CSSProperties;
-  render?: (eventProps: any, animationProps: any) => ReactElement;
-} & React.HTMLProps<HTMLDivElement>;
-
-const UseAnimations: React.FC<Props> = ({
-  animation: { animationData, animationKey },
-  reverse = false,
-  size = 24,
-  speed = 1,
-  strokeColor,
-  fillColor,
-  pathCss,
-  loop,
-  autoplay,
-  wrapperStyle,
-  options,
-  onClick,
-  render,
-  ...other
-}) => {
-  const [animation, setAnimation] = useState<AnimationItem>();
-  const [animationId] = useState<string>(getRandomId(animationKey));
-  const [events, setEvents] = useState<any>({});
-  const ref = useRef<HTMLDivElement>(null);
-
-  const defaultStyles = {
-    overflow: 'hidden',
-    outline: 'none',
-    width: `${size}px`,
-    height: `${size}px`,
-    ...wrapperStyle,
-  };
-
-  // INVOKE THE LOTTIE ANIMATION
-  useEffect(() => {
-    const animEffect: AnimationEffect = getEffect(animationKey);
-
-    const defaultOptions: AnimationConfigWithData = {
-      container: ref.current as Element,
-      renderer: 'svg',
-      animationData,
-      loop: loop || animEffect === 'LOOP_PLAY',
-      autoplay: autoplay || animEffect === 'LOOP_PLAY',
-      rendererSettings: {
-        // LOADS DOM ELEMENTS WHEN NEEDED. MIGHT SPEED UP INITIALIZATION FOR LARGE NUMBER OF ELEMENTS.
-        progressiveLoad: true,
-        // lottie-web missing id type
-        // @ts-ignore-next-line
-        id: animationId,
-      },
-      ...options,
-    };
-
-    setAnimation(lottie.loadAnimation(defaultOptions));
-
-    return () => {
-      animation?.destroy();
-      setAnimation(undefined);
-    };
-  }, []);
-
-  // HANDLE STYLING FOR ANIMATION
-  useEffect(() => {
-    if (strokeColor || fillColor || pathCss) {
-      try {
-        const css = `#${animationId} path { ${strokeColor ? `stroke: ${strokeColor};` : ''}  ${
-          fillColor ? `fill: ${fillColor};` : ''
-        } ${pathCss || ''}}`;
-        let sheetEl: any = document.getElementById('useAnimationsSheet');
-
-        // STYLESHEET HASN'T BEEN CREATED YET
-        if (!sheetEl) {
-          sheetEl = document.createElement('style');
-          sheetEl.setAttribute('id', 'useAnimationsSheet');
-          sheetEl.appendChild(document.createTextNode(''));
-          document.head.appendChild(sheetEl);
-        }
-
-        const sheet = sheetEl ? sheetEl.sheet || sheetEl.styleSheet : null;
-        sheet.insertRule(css);
-      } catch (err) {
-        // eslint-disable-next-line
-        console.warn(
-          `There's been a problem with deleting a CSSRule, please report that issue in https://github.com/useAnimations/react-useanimations`,
-          err
-        );
-      }
-    }
-
-    return () => {
-      // DELETE CSS RULE
-      try {
-        const sheetEl: any = document.getElementById('useAnimationsSheet');
-        const sheet = sheetEl ? sheetEl.sheet || sheetEl.styleSheet : null;
-
-        if (sheet) {
-          const animationRuleIndex = Array.from(sheet.cssRules).findIndex(
-            (rule: any) => rule.selectorText === `#${animationId} path`
-          );
-
-          if (animationRuleIndex !== -1) {
-            sheet.deleteRule(animationRuleIndex);
-          }
-        }
-      } catch (err) {
-        // eslint-disable-next-line
-        console.warn(
-          `There's been a problem with deleting a CSSRule, please report that issue in https://github.com/useAnimations/react-useanimations`,
-          err
-        );
-      }
-    };
-  }, [strokeColor, fillColor, pathCss]);
-
-  // SET NAVIGATION EVENTS
-  useEffect(() => {
-    // eslint-disable-next-line
-    const events = animation
-      ? getEvents({
-          animation,
-          reverse,
-          animEffect: getEffect(animationKey),
-        })
-      : undefined;
-
-    if (events) setEvents(events);
-  }, [animation, reverse]);
-
-  // SET ANIMATION SPEED
-  useEffect(() => {
-    if (animation) {
-      animation.setSpeed(speed);
-    }
-  }, [animation, speed]);
-
-  const eventProps = {
-    ...events,
-    onClick: (e: React.MouseEvent<HTMLDivElement>) => {
-      if (onClick) onClick(e);
-      if (events && 'onClick' in events) events.onClick();
-    },
-  };
-
-  const animationProps = {
-    ref,
-    ...other,
-    style: defaultStyles,
-  };
-
-  return render ? render(eventProps, animationProps) : <div {...eventProps} {...animationProps} />;
-};
-
-export default UseAnimations;

package/src/lib/activity/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import activity from './activity.json';
-
-export default { animationData: activity, animationKey: 'activity' } as Animation;

package/src/lib/airplay/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import airplay from './airplay.json';
-
-export default { animationData: airplay, animationKey: 'airplay' } as Animation;

package/src/lib/alertCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import alertCircle from './alertCircle.json';
-
-export default { animationData: alertCircle, animationKey: 'alertCircle' } as Animation;

package/src/lib/alertOctagon/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import alertOctagon from './alertOctagon.json';
-
-export default { animationData: alertOctagon, animationKey: 'alertOctagon' } as Animation;

package/src/lib/alertTriangle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import alertTriangle from './alertTriangle.json';
-
-export default { animationData: alertTriangle, animationKey: 'alertTriangle' } as Animation;

package/src/lib/archive/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import archive from './archive.json';
-
-export default { animationData: archive, animationKey: 'archive' } as Animation;

package/src/lib/arrowDown/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowDown from './arrowDown.json';
-
-export default { animationData: arrowDown, animationKey: 'arrowDown' } as Animation;

package/src/lib/arrowDownCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowDownCircle from './arrowDownCircle.json';
-
-export default { animationData: arrowDownCircle, animationKey: 'arrowDownCircle' } as Animation;

package/src/lib/arrowLeftCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowLeftCircle from './arrowLeftCircle.json';
-
-export default { animationData: arrowLeftCircle, animationKey: 'arrowLeftCircle' } as Animation;

package/src/lib/arrowRightCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowRightCircle from './arrowRightCircle.json';
-
-export default { animationData: arrowRightCircle, animationKey: 'arrowRightCircle' } as Animation;

package/src/lib/arrowUp/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowUp from './arrowUp.json';
-
-export default { animationData: arrowUp, animationKey: 'arrowUp' } as Animation;

package/src/lib/arrowUpCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowUpCircle from './arrowUpCircle.json';
-
-export default { animationData: arrowUpCircle, animationKey: 'arrowUpCircle' } as Animation;

package/src/lib/behance/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import behance from './behance.json';
-
-export default { animationData: behance, animationKey: 'behance' } as Animation;

package/src/lib/bookmark/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import bookmark from './bookmark.json';
-
-export default { animationData: bookmark, animationKey: 'bookmark' } as Animation;

package/src/lib/calendar/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import calendar from './calendar.json';
-
-export default { animationData: calendar, animationKey: 'calendar' } as Animation;

package/src/lib/checkBox/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import checkBox from './checkBox.json';
-
-export default { animationData: checkBox, animationKey: 'checkBox' } as Animation;

package/src/lib/checkmark/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import checkmark from './checkmark.json';
-
-export default { animationData: checkmark, animationKey: 'checkmark' } as Animation;

package/src/lib/codepen/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import codepen from './codepen.json';
-
-export default { animationData: codepen, animationKey: 'codepen' } as Animation;

package/src/lib/copy/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import copy from './copy.json';
-
-export default { animationData: copy, animationKey: 'copy' } as Animation;

package/src/lib/download/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import download from './download.json';
-
-export default { animationData: download, animationKey: 'download' } as Animation;

package/src/lib/dribbble/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import dribbble from './dribbble.json';
-
-export default { animationData: dribbble, animationKey: 'dribbble' } as Animation;

package/src/lib/edit/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import edit from './edit.json';
-
-export default { animationData: edit, animationKey: 'edit' } as Animation;

package/src/lib/error/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import error from './error.json';
-
-export default { animationData: error, animationKey: 'error' } as Animation;

package/src/lib/explore/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import explore from './explore.json';
-
-export default { animationData: explore, animationKey: 'explore' } as Animation;

package/src/lib/facebook/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import facebook from './facebook.json';
-
-export default { animationData: facebook, animationKey: 'facebook' } as Animation;

package/src/lib/folder/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import folder from './folder.json';
-
-export default { animationData: folder, animationKey: 'folder' } as Animation;

package/src/lib/github/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import github from './github.json';
-
-export default { animationData: github, animationKey: 'github' } as Animation;

package/src/lib/heart/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import heart from './heart.json';
-
-export default { animationData: heart, animationKey: 'heart' } as Animation;

package/src/lib/help/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import help from './help.json';
-
-export default { animationData: help, animationKey: 'help' } as Animation;

package/src/lib/home/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import home from './home.json';
-
-export default { animationData: home, animationKey: 'home' } as Animation;

package/src/lib/infinity/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import infinity from './infinity.json';
-
-export default { animationData: infinity, animationKey: 'infinity' } as Animation;

package/src/lib/info/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import info from './info.json';
-
-export default { animationData: info, animationKey: 'info' } as Animation;

package/src/lib/instagram/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import instagram from './instagram.json';
-
-export default { animationData: instagram, animationKey: 'instagram' } as Animation;

package/src/lib/linkedin/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import linkedin from './linkedin.json';
-
-export default { animationData: linkedin, animationKey: 'linkedin' } as Animation;

package/src/lib/loading/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import loading from './loading.json';
-
-export default { animationData: loading, animationKey: 'loading' } as Animation;

package/src/lib/loading2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import loading2 from './loading2.json';
-
-export default { animationData: loading2, animationKey: 'loading2' } as Animation;

package/src/lib/loading3/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import loading3 from './loading3.json';
-
-export default { animationData: loading3, animationKey: 'loading3' } as Animation;

package/src/lib/lock/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import lock from './lock.json';
-
-export default { animationData: lock, animationKey: 'lock' } as Animation;

package/src/lib/mail/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import mail from './mail.json';
-
-export default { animationData: mail, animationKey: 'mail' } as Animation;

package/src/lib/maximizeMinimize/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import maximizeMinimize from './maximizeMinimize.json';
-
-export default { animationData: maximizeMinimize, animationKey: 'maximizeMinimize' } as Animation;

package/src/lib/maximizeMinimize2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import maximizeMinimize2 from './maximizeMinimize2.json';
-
-export default { animationData: maximizeMinimize2, animationKey: 'maximizeMinimize2' } as Animation;

package/src/lib/menu/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import menu from './menu.json';
-
-export default { animationData: menu, animationKey: 'menu' } as Animation;

package/src/lib/menu2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import menu2 from './menu2.json';
-
-export default { animationData: menu2, animationKey: 'menu2' } as Animation;

package/src/lib/menu3/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import menu3 from './menu3.json';
-
-export default { animationData: menu3, animationKey: 'menu3' } as Animation;

package/src/lib/menu4/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import menu4 from './menu4.json';
-
-export default { animationData: menu4, animationKey: 'menu4' } as Animation;

package/src/lib/microphone/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import microphone from './microphone.json';
-
-export default { animationData: microphone, animationKey: 'microphone' } as Animation;

package/src/lib/microphone2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import microphone2 from './microphone2.json';
-
-export default { animationData: microphone2, animationKey: 'microphone2' } as Animation;

package/src/lib/notification/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import notification from './notification.json';
-
-export default { animationData: notification, animationKey: 'notification' } as Animation;

package/src/lib/notification2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import notification2 from './notification2.json';
-
-export default { animationData: notification2, animationKey: 'notification2' } as Animation;

package/src/lib/playPause/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import playPause from './playPause.json';
-
-export default { animationData: playPause, animationKey: 'playPause' } as Animation;

package/src/lib/playPauseCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import playPauseCircle from './playPauseCircle.json';
-
-export default { animationData: playPauseCircle, animationKey: 'playPauseCircle' } as Animation;