react-useanimations 2.0.7 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +110 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
## React UseAnimations Icons
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/react-useanimations) [](https://www.npmjs.com/package/react-useanimations)
|
|
4
|
+
|
|
5
|
+
#### What is react-useanimations?
|
|
6
|
+
|
|
7
|
+
React-useanimations is a collection of free animated open source icons for React.js.
|
|
8
|
+
|
|
9
|
+
#### Collection
|
|
10
|
+
|
|
11
|
+
[https://react.useanimations.com](https://react.useanimations.com/) and play with examples or visit our [Storybook](https://useanimations.github.io/react-useanimations/)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Installation
|
|
16
|
+
|
|
17
|
+
Using Yarn:
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
yarn add react-useanimations
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
or using NPM:
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
npm install -S react-useanimations
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Usage
|
|
30
|
+
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)
|
|
31
|
+
|
|
32
|
+
Basic usage
|
|
33
|
+
```javascript
|
|
34
|
+
import React from 'react';
|
|
35
|
+
import UseAnimations from 'react-useanimations';
|
|
36
|
+
// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
|
|
37
|
+
import github from 'react-useanimations/lib/github'
|
|
38
|
+
|
|
39
|
+
const App = () => <UseAnimations animation={github} />;
|
|
40
|
+
|
|
41
|
+
export default App;
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Icons can be configured with inline props:
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
<UseAnimations animation={github} size={56} wrapperStyle={{ padding: 100 }} />
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
These props are available:
|
|
51
|
+
| Prop | Default | Definition |
|
|
52
|
+
| :------------- | :----------: | -----------: |
|
|
53
|
+
| animation | / | animation file |
|
|
54
|
+
| size | `24` | animation size |
|
|
55
|
+
| strokeColor | `'inherit'` | animation stroke color |
|
|
56
|
+
| fillColor | `''` | animation fill color
|
|
57
|
+
| wrapperStyle | `{}` | wrapper div styles |
|
|
58
|
+
| pathCss | `''` | css string for the animation path element |
|
|
59
|
+
| reverse | `false` | assing to `true` when eg. checkbox should be checked initally |
|
|
60
|
+
| autoplay | `false`* | false except in animations like loading etc. |
|
|
61
|
+
| loop | `false`* | false except in animations like loading etc. |
|
|
62
|
+
| options | `{}` | provide any other custom options which will override the default ones |
|
|
63
|
+
| speed | `1` | a number to determine the speed of lottie(1 is normal speed) |
|
|
64
|
+
|
|
65
|
+
<br />
|
|
66
|
+
Controlled checkbox example
|
|
67
|
+
|
|
68
|
+
```javascript
|
|
69
|
+
export const RadioButton = () => {
|
|
70
|
+
// JUST EXAMPLE - THIS PART OF THE STATE WILL PROBABLY COME FROM A PARENT FORM COMPONENT
|
|
71
|
+
const [checked, setChecked] = useState(true);
|
|
72
|
+
|
|
73
|
+
return (
|
|
74
|
+
<div style={{ padding: '20px' }}>
|
|
75
|
+
<span>radioButton</span>
|
|
76
|
+
<UseAnimation
|
|
77
|
+
reverse={checked}
|
|
78
|
+
onClick={() => {
|
|
79
|
+
setChecked(!checked);
|
|
80
|
+
}}
|
|
81
|
+
size={40}
|
|
82
|
+
wrapperStyle={{ marginTop: '5px' }}
|
|
83
|
+
animation={radioButton}
|
|
84
|
+
/>
|
|
85
|
+
</div>
|
|
86
|
+
);
|
|
87
|
+
};
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Animation wrapped in element (use render prop).
|
|
91
|
+
```javascript
|
|
92
|
+
export const WrapperElement = () => {
|
|
93
|
+
return (
|
|
94
|
+
<UseAnimation
|
|
95
|
+
animation={heart}
|
|
96
|
+
size={60}
|
|
97
|
+
onClick={() => {
|
|
98
|
+
// eslint-disable-next-line
|
|
99
|
+
console.log('additional onClick cb is working');
|
|
100
|
+
}}
|
|
101
|
+
render={(eventProps, animationProps) => (
|
|
102
|
+
<button style={{ padding: '20px' }} type="button" {...eventProps}>
|
|
103
|
+
<div {...animationProps} />
|
|
104
|
+
</button>
|
|
105
|
+
)}
|
|
106
|
+
/>
|
|
107
|
+
);
|
|
108
|
+
};
|
|
109
|
+
```
|
|
110
|
+
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>`
|