Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hex2f/xnap
👌 Components that snap.
https://github.com/hex2f/xnap
Last synced: 8 days ago
JSON representation
👌 Components that snap.
- Host: GitHub
- URL: https://github.com/hex2f/xnap
- Owner: hex2f
- License: mit
- Created: 2019-07-19T15:13:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T22:31:26.000Z (almost 2 years ago)
- Last Synced: 2024-05-19T11:09:41.543Z (6 months ago)
- Language: JavaScript
- Homepage: https://leahlundqvist.github.io/xnap/
- Size: 5.33 MB
- Stars: 26
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Xnap
Components that snap.
## Demo
[https://memeone.github.io/xnap/](https://memeone.github.io/xnap/)
```
npm i --save xnap
```
## How do i use it?
For a full example, check out /example.
Here's a simple example that snaps between `transformX(-100%)` and `transformX(100%)`.
```js
let xnapCard = new Xnap(component, { states: ['-100% + ', '100% + '], direction: 0 })
xnapCard.register() // Register the event listeners.
```
## Options
```js
new Xnap(component, { options })
```
| Name | Type | Default | Description |
|-------------|--------------|----------------------|--------------------------------------------------------------------------------------------------------------------------|
| exact | Boolean | false | If dragging should only be triggered when you touch the component xnap was mounted on. |
| state | Boolean | false | Which state the component is initiated with. |
| states | String Array | ['0% + ', '100% + '] | What the transforms are for the states. Movement is appended to the current string. |
| scaleStates | Number Array | [1.0, 1.0] | What the scales are for the states. |
| factor | Number | 5 | How snappy it is. Higher = Snappier. |
| length | Number | 100 | How far it needs to be dragged before it snaps. |
| onTrue | Function | None | Function that triggers when state is set to true. |
| onFalse | Function | None | Function that triggers when state is set to false. |
| condition | Function | () => true | Runs on mouse/touch down, if false return: don't trigger moving. |
| direction | Number | 1 | Which direction it moves. 0 = Left/Right. 1 = Up/Down. |
| vibrate | Number | None | If a number is given, it vibrates the device on state change for the given duration in MS. Use 2 - 5 for a clicky tap. |