react-useanimations 2.0.7 → 2.0.9

package/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

package/.editorconfig

@@ -0,0 +1,15 @@
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+indent_size = 2
+
+[*.{js,ts,jsx,tsx}]
+indent_size = 2
+
+[*.json]
+indent_size = 2

package/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "airbnb-typescript",
+    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "arrow-parens": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/prop-types": "off",
+    "rest-spread-spacing": "off",
+    "object-curly-newline": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          ".storybook/**",
+          "./src/**/*.stories.tsx" 
+        ]
+      }
+    ]
+  }
+}

package/.gitattributes

@@ -0,0 +1 @@
+docs/** linguist-generated=true

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+    "printWidth": 100,
+    "tabWidth": 2,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "semi": true
+  }
+  

package/.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  stories: ['../src/**/*.stories.tsx'],
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      loader: require.resolve('babel-loader'),
+      options: {
+        presets: [['react-app', { flow: false, typescript: true }]],
+      },
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+    return config;
+  },
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+}

package/LICENSE

@@ -0,0 +1,30 @@
+RIGHTS
+
+All the free files available in useAnimations are distributed
+under Creative Commons (CC) Attribution (BY) unless stated otherwise.
+Our resources (animations) can be used for personal and commercial usage
+within Web and Mobile Applications.
+
+You may modify the resources according to your requirements and use them
+in any or all of your personal or commercial projects. For example,
+you may include this resource on a website or mobile application
+you will be designing for a client.
+
+You are required to attribute or link to useanimations.com in any of projects.
+useAnimations (useanimations.com) will not be responsible for any outcome
+that may occur during the use of our resources.
+
+Files from useAnimations can be shared as long as the useAnimations
+are credited appropriately. 
+
+
+PROHIBITIONS
+
+You do not have the rights to redistribute, resell, lease, license,
+sub-license or offer the file downloaded to any third party.
+For any resalable web applications, software programs, web templates,
+app templates, merchandise etc. you should not include our graphics resources.
+This will be considered as a redistribution of our resources
+which is forbidden by us.
+
+More about Creative Commons (CC) Attribution (BY) - https://creativecommons.org/licenses/by/4.0/

package/README.md

@@ -0,0 +1,110 @@
+## 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

@@ -0,0 +1,46 @@
+## 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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-useanimations",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Official React component for useanimations icons",
   "repository": {
     "type": "git",
     "url": "https://github.com/useAnimations/react-useanimations.git"
   },
-  "author": "Tuan Phung",
+  "author": "Tuan Phung, Marek Feikus",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/useAnimations/react-useanimations/issues"
@@ -72,6 +72,7 @@
     "typescript": "^3.8.3"
   },
   "peerDependencies": {
-    "react": "^16.9.0"
+    "react": ">=16",
+    "react-dom": ">=16"
   }
 }

package/src/index.tsx

@@ -0,0 +1,177 @@
+/* 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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

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