https://github.com/kunukn/fuzzytoggle
A toggle with fuzzy value between 0 and 1
https://github.com/kunukn/fuzzytoggle
Last synced: about 2 months ago
JSON representation
A toggle with fuzzy value between 0 and 1
- Host: GitHub
- URL: https://github.com/kunukn/fuzzytoggle
- Owner: kunukn
- License: mit
- Created: 2019-01-13T18:58:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:06:31.000Z (over 2 years ago)
- Last Synced: 2025-03-18T04:04:16.170Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.27 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# FuzzyToggle
## About
A toggle with fuzzy state between value `[0; 1]` from given duration.
## Demo
* Codepen - show concept
* Codepen - checkbox
* Codesandbox - Checkbox
## Getting started
`npm i @kunukn/fuzzytoggle`
## Usage example
```js
import createToggle from '@kunukn/fuzzytoggle';
function log(){ console.log(...arguments) };
let onUpdate = ({value:v, motion:m}) => { log('upd:',v,m) };
let onDone = ({value:v, motion:m, hasReversed:h}) => { log('done:',v,m,h) };
let fuzzy = createToggle({
duration: 1000,
value: 0, // 0 or 1
onUpdate,
onDone,
});
fuzzy.toggle();
// example:
// console.log -> upd: 0.2 'expanding'
setTimeout(()=>{
fuzzy.toggle();
// example:
// console.log -> upd: 0.5 'collapsing'
}, 600);
// console.log -> done: 0 'collapsed' true
```
## Methods
* `toggle` reverses the toggle direction until value 0 or 1
* `cancel` cancels and stops current toggle direction
## Event hooks
* onUpdate: `({value, motion}) => { /* your code */ }`
* onDone: `({value, motion, hasReversed}) => { /* your code */ }`
* onCancel: `({value, motion, hasReversed}) => { /* your code */ }`
* onToggle: `({value, motion, hasReversed}) => { /* your code */ }`
## Size
ES5 `FuzzyToggle.umd.js`
UMD minified 2.93 kb (gzipped 1.25 kb)