solid-swipe-card
v1.0.2
Published
A SolidJS swipeable card component (tinder-like)
Downloads
13
Maintainers
Readme
Solid Swipe Card
A SolidJS swipeable card component (tinder-like) heavily inspired by react-tinder-card
.
Installing
To install, run
npm install solid-swipe-card
# or
yarn add solid-swipe-card
Quick Start
import { SwipeCard } from 'solid-swipe-card';
const App = () => {
return (
<div>
<SwipeCard class="...">
<div>I'm a Swipe Card!</div>
</SwipeCard>
</div>
);
};
Props
Both createSwipeCard
and SwipeCard
use the same prop structure, defined in SwipeCardProps
.
createSwipeCard
import { createSwipeCard } from 'solid-swipe-card';
const { element, ref, apiRef } = createSwipeCard(props);
This primitive returns 3 objects:
element
The rendered solid-js component, ready for use.
ref
The ref that attaches directly to the component.
apiRef
The reference to access the methods of the card. See SwipeCardRef
for the available methods.
SwipeCard
Under the hood, SwipeCard uses createSwipeCard
, passing its props and returning the element.
import { SwipeCard } from 'solid-swipe-card';
let ref;
let apiRef: SwipeCardRef;
//...
<SwipeCard class="..." ref={ref} apiRef={apiRef}>
<div>I'm a Swipe Card!</div>
</SwipeCard>;
//...
Types
SwipeCardProps
The type that defines what props SwipeCard
and createSwipeCard
use. It inherits from JSX.HTMLAttributes<HTMLDivElement>
, the standard props for a normal <div>
element and adds the following properties.
style
- optional
- type:
JSX.CSSProperties
Additional style to assign to the component. Currently, style as a string
is not supported due to how this library handles the movement of the card.
threshold
- optional
- type:
number
- default:
300
The threshold for considering wether or not a card is swiped. It is based on the speed of which the component moves (px/s). A lower number will make it easier to register a swipe, a higher one will make it harder.
minSpeed
- optional
- type:
number
- default:
0
The minimum speed (px/s) at which the card will travel once it is released.
rotationMultiplier
- optional
- type:
number
- default:
7.5
The coefficient of the rotation. A lower number will make it rotate less, a higher one more.
maxRotation
- optional
- type:
number
- default:
90
The maximum rotation degrees (ranging from -maxRotation/2
to +maxRotation/2
) to add when releasing a card.
bouncePower
- optional
- type:
number
- default:
0.1
The bounce power of which the card will sway back before returning to its original position when bringBack
is called.
Keep it between 0 and 0.5 to avoid the card flinging on the other side of the screen.
snapBackDuration
- optional
- type:
number
- default:
300
The duration of the animation (in ms) triggered by snapBack
.
It will animate the snapback for its full duration, then when bouncing back to the original position, it will animate for half of its duration after a delay of 25ms.
smoothDuration
- optional
- type:
number
- default:
40
The transition duration (in ms) when moving the card.
A higher value will make the card delay it's movement when following the mouse.
A lower number will reduce the smoothing effect, and it won't have any visual effect when it goes below the refresh rate.
Recommended values are between 150
and 0
onSwipe
- optional
- type:
(direction: SwipeDirection) => void
- default:
() => {}
The callback to invoke after the card has registered a swipe (before it has finished animating). It will also provide a enum describing the direction of the swipe (see SwipeDirection
).
onSnapBack
- optional
- type:
() => void
- default:
() => {}
The callback to invoke after snapBack
has been invoked. It will execute after the card has returned to its original position.
apiRef
- optional
- type:
SwipeCardRef
The reference to access the methods and properties of the card. See SwipeCardRef
for the available methods. Currently, it won't assign the methods if it is null
or undefined
.
NOTE: Currently, to pass it in typescript, you'd need to declare the apiRef as follows:
const apiRef: SwipeCardRef = {};
// or
const apiRef: any = {};
SwipeDirection
The enum that defines a direction defined as follows:
type SwipeDirection = 'right' | 'left' | 'up' | 'down';
SwipeCardRef
The type that defines the methods and properties available to interact with the element.
snapBack()
- returns:
Promise<void>
It will reset to the original position the card if it has been swiped. Since it is async, it can be awaited if needed.
swipe()
- type:
(direction: _SwipeDirection, velocity?: number) => Promise<void> | void
- returns:
Promise<void> | void
This method will swipe the card in the specified direction at the provided velocity. If velocity
is not set, it will fallback first on props.minSpeed
and then on props.threshold
.
swiped()
- type:
Accessor<boolean>
- returns:
boolean
A Accessor that will update when the card has been swiped (or when it is brought back). It describes wether or not the card has been swiped or not.
Contributing
See CONTRIBUTING.
Storybook
Storybook has been added in the subproject located in stories
.
To run Storybook locally, first install this project dependencies:
npm install
# or
yarn install
Then run
npm run storybook
# or
yarn storybook
It will install the subproject dependencies and start Storybook.
NOTE: Currently, this method requires
yarn
. If you don't or can't install it, please follow the subproject README.
Alternatively, a Storybook deployed instance can be found here.
Additional Notes
This is my first library that I'm writing, I'm open to constructive criticism about the repo structure, code quality and design choices.