reshake

CSShake as a React Functional Component.

##### Playground :: Blog Post (ES)

``
npm i --save reshake styled-components
`

#### Full customizable way

`js
import React from 'react'
import { Shake } from 'reshake'

const MyShake = () => (

Brrr...

)
`

Available props:

| Prop | Desc | Type | Default | Result unit |
| ----------- | ----------------------------------------------------------------------------------- | ----------------- | --------------- | ----------- |
| h | max horizontal | Number | 5 | px |
| v | max vertical | Number | 5 | px |
| r | max rotation | Number | 5 | deg |
| dur | complete animation cycle duration | Number | 300 | ms |
| q | iterations quantity | Number String | 'infinite' | |
| tf | CSS animation-timing-function | String | 'ease-in-out' | |
| int | interval between each @keyframe, a kind of fine tuning for the animation | Number | 10 | % |
| max | max @keyframe value, in case other than 100% creates a _pause_ in the animation | Number | 100 | % |
| orig | CSS transform-origin | String | 'center center' | |
| fixed | fixed animation | Boolean | false | |
| freez | _pause_ in the animation when interacting | Boolean | false | |
| active | active the animations | Boolean | true | |
| trigger | _CSS pseudo-class_ which interacts with animation | String | true | |
| fixedStop | Allows to stop the animation with trigger when animation is fixed | String | false | |

#### Easy way with _defaults_:

`js
import React from 'react'
import { ShakeLittle, ShakeSlow, ShakeHorizontal } from 'reshake'

const MoreShakes = () => (



)
`

Available Components:

*
*
*
*
*
*
*

All components accept also the same props as . The defaults could be imported as

`js
import { shakes } from reshake
``

#### Playground