npm i slot-machine-button -S

Within a React project:

// SomeComponent.js

import React from 'react';
import SlotMachineButton from 'slot-machine-button';

// ...

<SlotMachineButton
  activeOnHover={true}
>
  <span>Slot</span>
  <span>Slot</span>
  <span>Machine</span>
  <span>Machine</span>
  <span>Button</span>
  <span>Button</span>
</SlotMachineButton>

<SlotMachineButton
  activeOnHover={true}
  bottomToTop={true}
  delay={[0, 0.3]}
  element="div"
  className="slot-machine-button"
  fadeBack={true}
  domAttributes={{
    'aria-label': 'button'
  }}
>
  <span data-slot-disable>Slot</span>
  <span data-slot-duplicate>Machine</span>
  <span data-slot-duplicate>Button</span>
</SlotMachineButton>

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.

Available props:

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.

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

fadeDuration should be shorter than the duration to make the slot effect more realistic.

These props only works when fadeBack is set to true

These css rules are usually used to vertically center the content in the button

.slot-machine-button .part {
  display: flex;
  align-items: center;
}

git clone https://github.com/Jam3/slot-machine-button.git
cd slot-machine-button

npm i
npm t