Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elrumordelaluz/reshake
CSShake as a React Functional Component
https://github.com/elrumordelaluz/reshake
Last synced: 28 days ago
JSON representation
CSShake as a React Functional Component
- Host: GitHub
- URL: https://github.com/elrumordelaluz/reshake
- Owner: elrumordelaluz
- License: mit
- Created: 2016-10-02T21:25:47.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-10T07:52:50.000Z (over 1 year ago)
- Last Synced: 2024-09-04T00:06:50.503Z (3 months ago)
- Language: TypeScript
- Homepage: https://elrumordelaluz.github.io/reshake/
- Size: 1.02 MB
- Stars: 273
- Watchers: 6
- Forks: 13
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reshake
[CSShake](http://elrumordelaluz.github.io/csshake/) as a React Functional Component.
##### [Playground](https://elrumordelaluz.github.io/reshake/) :: [Blog Post (ES)](http://octuweb.com/jugando-css-javascript/)
```
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 = () => (
Tiny brrr...
SlowMo ving...
✋
)
```
Available Components:
* ``
* ``
* ``
* ``
* ``
* ``
* ``
All components accept also the same `props` as ``. The [defaults](https://github.com/elrumordelaluz/reshake/blob/master/src/shakes.js) could be imported as
```js
import { shakes } from reshake
```
#### [Playground](https://elrumordelaluz.github.io/reshake/)