react-useanimations 2.0.3 → 2.0.7

package/utils/constants.d.ts

@@ -3,4 +3,4 @@ export declare type Animation = {
     animationData: any;
     animationKey: AnimationKey;
 };
-export declare type AnimationKey = 'activity' | 'airplay' | 'alertCircle' | 'alertOctagon' | 'alertTriangle' | 'archive' | 'arrowDown' | 'arrowDownCircle' | 'arrowLeftCircle' | 'arrowRightCircle' | 'arrowUp' | 'arrowUpCircle' | 'bookmark' | 'calendar' | 'checkBox' | 'codepen' | 'copy' | 'download' | 'edit' | 'explore' | 'facebook' | 'github' | 'heart' | 'infinity' | 'info' | 'instagram' | 'linkedin' | 'loading' | 'loading2' | 'loading3' | 'lock' | 'mail' | 'maximizeMinimize' | 'maximizeMinimize2' | 'menu' | 'menu2' | 'menu3' | 'menu4' | 'microphone' | 'microphone2' | 'notification' | 'notification2' | 'playPause' | 'playPauseCircle' | 'plusToX' | 'pocket' | 'radioButton' | 'scrollDown' | 'searchToX' | 'settings' | 'settings2' | 'share' | 'skipBack' | 'skipForward' | 'star' | 'thumbUp' | 'toggle' | 'trash' | 'trash2' | 'twitter' | 'userMinus' | 'userPlus' | 'userX' | 'video' | 'video2' | 'visibility' | 'visibility2' | 'volume' | 'youtube' | 'youtube2';
+export declare type AnimationKey = 'activity' | 'airplay' | 'alertCircle' | 'alertOctagon' | 'alertTriangle' | 'archive' | 'arrowDown' | 'arrowDownCircle' | 'arrowLeftCircle' | 'arrowRightCircle' | 'arrowUp' | 'arrowUpCircle' | 'bookmark' | 'behance' | 'calendar' | 'checkBox' | 'checkmark' | 'codepen' | 'copy' | 'download' | 'dribbble' | 'edit' | 'error' | 'explore' | 'facebook' | 'folder' | 'github' | 'heart' | 'help' | 'home' | 'infinity' | 'info' | 'instagram' | 'linkedin' | 'loading' | 'loading2' | 'loading3' | 'lock' | 'mail' | 'maximizeMinimize' | 'maximizeMinimize2' | 'menu' | 'menu2' | 'menu3' | 'menu4' | 'microphone' | 'microphone2' | 'notification' | 'notification2' | 'playPause' | 'playPauseCircle' | 'plusToX' | 'pocket' | 'radioButton' | 'scrollDown' | 'searchToX' | 'settings' | 'settings2' | 'share' | 'skipBack' | 'skipForward' | 'star' | 'thumbUp' | 'toggle' | 'trash' | 'trash2' | 'twitter' | 'userMinus' | 'userPlus' | 'userX' | 'video' | 'video2' | 'visibility' | 'visibility2' | 'volume' | 'youtube' | 'youtube2' | 'zoomIn' | 'zoomOut';

package/utils/getEffect.js

@@ -18,16 +18,23 @@ var animations = {
   arrowUp: 'LOOP_PLAY',
   arrowUpCircle: 'CLICK_PLAY_AND_BACKWARDS',
   bookmark: 'CLICK_PLAY_AND_BACKWARDS',
+  behance: 'HOVER_PLAY_AND_STOP',
   calendar: 'HOVER_PLAY_AND_STOP',
   checkBox: 'CLICK_PLAY_AND_BACKWARDS',
+  checkmark: 'LOOP_PLAY',
   codepen: 'HOVER_PLAY_AND_STOP',
   copy: 'CLICK_PLAY',
   download: 'CLICK_PLAY',
+  dribbble: 'HOVER_PLAY_AND_BACKWARDS',
   edit: 'CLICK_PLAY',
+  error: 'LOOP_PLAY',
   explore: 'HOVER_PLAY_AND_BACKWARDS',
   facebook: 'HOVER_PLAY_AND_STOP',
+  folder: 'HOVER_PLAY_AND_STOP',
   github: 'HOVER_PLAY_AND_STOP',
+  help: 'LOOP_PLAY',
   heart: 'CLICK_PLAY_AND_BACKWARDS',
+  home: 'HOVER_PLAY_AND_STOP',
   infinity: 'LOOP_PLAY',
   info: 'HOVER_PLAY_AND_BACKWARDS',
   instagram: 'HOVER_PLAY_AND_STOP',
@@ -74,7 +81,9 @@ var animations = {
   visibility2: 'CLICK_PLAY_AND_BACKWARDS',
   volume: 'CLICK_PLAY_AND_BACKWARDS',
   youtube: 'HOVER_PLAY_AND_STOP',
-  youtube2: 'HOVER_PLAY_AND_STOP'
+  youtube2: 'HOVER_PLAY_AND_STOP',
+  zoomIn: 'LOOP_PLAY',
+  zoomOut: 'LOOP_PLAY'
 };
 
 var getEffect = function getEffect(animationKey) {

package/README.md

@@ -1,86 +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 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 |
-
-<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>
-  );
-};
-```