reshake

CSShake as a React Functional Component.

Playground :: Blog Post (ES)

npm i --save reshake styled-components

Full customizable way

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

const MyShake = () => (
  <Shake h={10} v={0} r={3}>
    Brrr...
  </Shake>
)

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:

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

const MoreShakes = () => (
  <div>
    <ShakeLittle>Tiny brrr...</ShakeLittle>
    <ShakeSlow>SlowMo ving...</ShakeSlow>
    <ShakeHorizontal>
      <span>✋</span>
    </ShakeHorizontal>
  </div>
)

Available Components:

• <ShakeLittle />
• <ShakeSlow />
• <ShakeHard />
• <ShakeHorizontal />
• <ShakeVertical />
• <ShakeRotate />
• <ShakeCrazy />

All components accept also the same props as <Shake />. The defaults could be imported as

import { shakes } from reshake

Playground