https://github.com/experience-monks/slot-machine-button
:slot_machine: React Slot Machine Button
https://github.com/experience-monks/slot-machine-button
button-animation component react react-component slot-machine
Last synced: 5 months ago
JSON representation
:slot_machine: React Slot Machine Button
- Host: GitHub
- URL: https://github.com/experience-monks/slot-machine-button
- Owner: Experience-Monks
- License: mit
- Created: 2017-06-19T15:41:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-07T22:09:13.000Z (over 7 years ago)
- Last Synced: 2025-05-09T06:31:30.019Z (5 months ago)
- Topics: button-animation, component, react, react-component, slot-machine
- Language: JavaScript
- Homepage:
- Size: 479 KB
- Stars: 13
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# React Slot Machine Button
[](https://www.npmjs.com/package/slot-machine-button)
## Install and Import
```sh
npm i slot-machine-button -S
```
Within a React project:
```jsx
// SomeComponent.js
import React from 'react';
import SlotMachineButton from 'slot-machine-button';
// ...
```
## Example
#### 1 minute setup
```jsx
Slot
Slot
Machine
Machine
Button
Button
```
#### A more complex one
```jsx
Slot
Machine
Button
```
## Children
There are two props can be passed to the children:
- `data-slot-disable` to disable the effect for the child even if it's placed within the component.
- `data-slot-duplicate` to clone the child, in order to have two identical children to do the effect.
Each group of children will be placed in a `.wheel` class,
and the elements of two states inside will have the classes `.active.part` or `.idle.part` respectively.
## PropTypes
Available props:
props | type | description | default
----- | ---- | ----------- | -------
`activeOnHover` | boolean | activate the slot effect on hover | none (`false`)
`bottomToTop` | boolean | direction of the slot effect | `false` (from top to bottom)
`className` | string | css class name of the button | none
`delay` | number | delay before the start of the animation [1] | `0` (second)
`domAttributes` | object | all DOM attributes the component may need | none
`duration` | number | the duration of a one-way slot effect | `0.5` (second)
`ease` | object | the GSAP ease for the slot effect [2] | `Expo.easeInOut`
`element` | string | the container element of the component | `button` (``)
`fadeBack` | boolean | if it should fade back instead of slot back | `false`
`fadeBackDuration` | number | duration for fading back | `0.6` (second)
`fadeBackEase` | object | GSAP ease for fading back | `Linear.easeNone`
`fadeDuration` | number | the fade duration of the slot effect | `0.4` (second)
`idleHasTransparency` | boolean | if the idle layer has transparency [3] | `false`
`isActive` | boolean | receive the active state from its parent | none (`false`)
`onClick` | function | function called on click | none
`onMouseEnter` | function | function called on mouse enter | none
`onMouseLeave` | function | function called on mouse leave | none
`shouldComponentUpdate` | function | function passed into `shouldComponentUpdate` | `() => false`
> 1. The delay can also be an array of different delays in the same order of the children.
> 2. Usually `easeInOut` works better for both ways of transition.
> 3. Experimental: It is recommended to use solid color for both idle and active layers.
But if this is set to true when `fadeBack` is true, the active layer will fadeOut.
## Related Props
#### `activeOnHover` and `isActive`
Usually only one of them should be used:
- Use `activeOnHover` to go to active state by hovering the component itself
- Or use `isActive` to switch between states based on this props passed from the parent
#### `duration` and `fadeDuration`
`fadeDuration` should be shorter than the `duration` to make the slot effect more realistic.
#### `fadeBackDuration`, `fadeBackEase` and `idleHasTransparency` with `fadeBack`
These props only works when `fadeBack` is set to `true`
## Commonly Used Style
These css rules are usually used to vertically center the content in the button
```css
.slot-machine-button .part {
display: flex;
align-items: center;
}
```
## Test & Development
```sh
git clone https://github.com/Jam3/slot-machine-button.git
cd slot-machine-button
npm i
npm t
```