2.0.0 ā¢ Published 10 months ago
reshake v2.0.0
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
2.0.0
10 months ago
1.2.4
2 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.1
5 years ago
1.2.0
5 years ago
1.1.6
6 years ago
1.1.5
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.8
6 years ago
1.0.7
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
8 years ago
1.0.2
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago