{"id":28140808,"url":"https://github.com/experience-monks/slot-machine-button","last_synced_at":"2025-10-29T06:32:44.698Z","repository":{"id":57363324,"uuid":"94793383","full_name":"Experience-Monks/slot-machine-button","owner":"Experience-Monks","description":":slot_machine: React Slot Machine Button","archived":false,"fork":false,"pushed_at":"2018-03-07T22:09:13.000Z","size":490,"stargazers_count":13,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-09T06:31:30.019Z","etag":null,"topics":["button-animation","component","react","react-component","slot-machine"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Experience-Monks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2017-06-19T15:41:27.000Z","updated_at":"2024-05-11T15:09:29.000Z","dependencies_parsed_at":"2022-09-13T22:42:03.912Z","dependency_job_id":null,"html_url":"https://github.com/Experience-Monks/slot-machine-button","commit_stats":null,"previous_names":["experience-monks/slot-machine-button","jam3/slot-machine-button"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Experience-Monks%2Fslot-machine-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Experience-Monks%2Fslot-machine-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Experience-Monks%2Fslot-machine-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Experience-Monks%2Fslot-machine-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Experience-Monks","download_url":"https://codeload.github.com/Experience-Monks/slot-machine-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198434,"owners_count":22030966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["button-animation","component","react","react-component","slot-machine"],"created_at":"2025-05-14T18:12:27.935Z","updated_at":"2025-10-29T06:32:39.650Z","avatar_url":"https://github.com/Experience-Monks.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Slot Machine Button\n\n[![npm](https://img.shields.io/npm/v/slot-machine-button.svg?style=flat-square)](https://www.npmjs.com/package/slot-machine-button)\n\n![Slot Machine Button Demo](demo/demo.gif)\n\n## Install and Import\n\n```sh\nnpm i slot-machine-button -S\n```\n\nWithin a React project:\n\n```jsx\n// SomeComponent.js\n\nimport React from 'react';\nimport SlotMachineButton from 'slot-machine-button';\n\n// ...\n```\n\n## Example\n\n#### 1 minute setup\n\n```jsx\n\u003cSlotMachineButton\n  activeOnHover={true}\n\u003e\n  \u003cspan\u003eSlot\u003c/span\u003e\n  \u003cspan\u003eSlot\u003c/span\u003e\n  \u003cspan\u003eMachine\u003c/span\u003e\n  \u003cspan\u003eMachine\u003c/span\u003e\n  \u003cspan\u003eButton\u003c/span\u003e\n  \u003cspan\u003eButton\u003c/span\u003e\n\u003c/SlotMachineButton\u003e\n```\n\n#### A more complex one\n\n```jsx\n\u003cSlotMachineButton\n  activeOnHover={true}\n  bottomToTop={true}\n  delay={[0, 0.3]}\n  element=\"div\"\n  className=\"slot-machine-button\"\n  fadeBack={true}\n  domAttributes={{\n    'aria-label': 'button'\n  }}\n\u003e\n  \u003cspan data-slot-disable\u003eSlot\u003c/span\u003e\n  \u003cspan data-slot-duplicate\u003eMachine\u003c/span\u003e\n  \u003cspan data-slot-duplicate\u003eButton\u003c/span\u003e\n\u003c/SlotMachineButton\u003e\n```\n\n## Children\n\nThere are two props can be passed to the children:\n\n- `data-slot-disable` to disable the effect for the child even if it's placed within the component.\n\n- `data-slot-duplicate` to clone the child, in order to have two identical children to do the effect.\n\nEach group of children will be placed in a `.wheel` class,\nand the elements of two states inside will have the classes `.active.part` or `.idle.part` respectively.\n\n## PropTypes\n\nAvailable props:\n\nprops                   | type     | description                                  | default\n-----                   | ----     | -----------                                  | -------\n`activeOnHover`         | boolean  | activate the slot effect on hover            | none (`false`)\n`bottomToTop`           | boolean  | direction of the slot effect                 | `false` (from top to bottom)\n`className`             | string   | css class name of the button                 | none\n`delay`                 | number   | delay before the start of the animation [1]  | `0` (second)\n`domAttributes`         | object   | all DOM attributes the component may need    | none\n`duration`              | number   | the duration of a one-way slot effect        | `0.5` (second)\n`ease`                  | object   | the GSAP ease for the slot effect [2]        | `Expo.easeInOut`\n`element`               | string   | the container element of the component       | `button` (`\u003cbutton/\u003e`)\n`fadeBack`              | boolean  | if it should fade back instead of slot back  | `false`\n`fadeBackDuration`      | number   | duration for fading back                     | `0.6` (second)\n`fadeBackEase`          | object   | GSAP ease for fading back                    | `Linear.easeNone`\n`fadeDuration`          | number   | the fade duration of the slot effect         | `0.4` (second)\n`idleHasTransparency`   | boolean  | if the idle layer has transparency [3]       | `false`\n`isActive`              | boolean  | receive the active state from its parent     | none (`false`)\n`onClick`               | function | function called on click                     | none\n`onMouseEnter`          | function | function called on mouse enter               | none\n`onMouseLeave`          | function | function called on mouse leave               | none\n`shouldComponentUpdate` | function | function passed into `shouldComponentUpdate` | `() =\u003e false`\n\n\u003e 1. The delay can also be an array of different delays in the same order of the children.\n\u003e 2. Usually `easeInOut` works better for both ways of transition.\n\u003e 3. Experimental: It is recommended to use solid color for both idle and active layers.\n     But if this is set to true when `fadeBack` is true, the active layer will fadeOut.\n\n## Related Props\n\n#### `activeOnHover` and `isActive`\n\nUsually only one of them should be used:\n\n- Use `activeOnHover` to go to active state by hovering the component itself\n\n- Or use `isActive` to switch between states based on this props passed from the parent\n\n#### `duration` and `fadeDuration`\n\n`fadeDuration` should be shorter than the `duration` to make the slot effect more realistic.\n\n#### `fadeBackDuration`, `fadeBackEase` and `idleHasTransparency` with `fadeBack`\n\nThese props only works when `fadeBack` is set to `true`\n\n## Commonly Used Style\n\nThese css rules are usually used to vertically center the content in the button\n\n```css\n.slot-machine-button .part {\n  display: flex;\n  align-items: center;\n}\n```\n\n## Test \u0026 Development\n\n```sh\ngit clone https://github.com/Jam3/slot-machine-button.git\ncd slot-machine-button\n\nnpm i\nnpm t\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexperience-monks%2Fslot-machine-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexperience-monks%2Fslot-machine-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexperience-monks%2Fslot-machine-button/lists"}