Awesome

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