Need help with react-useanimations?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

useAnimations
516 Stars 19 Forks Other 62 Commits 5 Opened issues

Description

React-useanimations is a collection of free animated open source icons for React.js.

Services available

!
?

Need anything else?

Contributors list

React UseAnimations Icons

npm version npm downloads

What is react-useanimations?

React-useanimations is a collection of free animated open source icons for React.js.

Collection

https://react.useanimations.com and play with examples or visit our Storybook

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 - [email protected]

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 = () => ;

export default App; ```

Icons can be configured with inline props:


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 |


Controlled checkbox example

export const RadioButton = () => {
  // JUST EXAMPLE - THIS PART OF THE STATE WILL PROBABLY COME FROM A PARENT FORM COMPONENT
  const [checked, setChecked] = useState(true);

return (

radioButton { setChecked(!checked); }} size={40} wrapperStyle={{ marginTop: '5px' }} animation={radioButton} />

); };

Animation wrapped in element (use render prop).

javascript
export const WrapperElement = () => {
  return (
     {
        // eslint-disable-next-line
        console.log('additional onClick cb is working');
      }}
      render={(eventProps, animationProps) => (
        
          
)} /> ); };
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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.