Skip to content

Latest commit

 

History

History
76 lines (60 loc) · 3.62 KB

README.md

File metadata and controls

76 lines (60 loc) · 3.62 KB

reshake

CSShake as a React Functional Component.

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