npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

solid-swipe-card

v1.0.2

Published

A SolidJS swipeable card component (tinder-like)

Downloads

13

Readme

Solid Swipe Card

NPM Version License Deploy Codecov

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

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.