Logo for jsDocs.io

react-swipeable

  • Version 7.0.2
  • Published
  • 87.5 kB
  • No dependencies
  • MIT license

Install

npm i react-swipeable
yarn add react-swipeable
pnpm add react-swipeable

Overview

React Swipe event handler hook

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable DOWN

const DOWN: string;

    variable LEFT

    const LEFT: string;
      const RIGHT: string;

        variable UP

        const UP: string;

          Functions

          function useSwipeable

          useSwipeable: (options: SwipeableProps) => SwipeableHandlers;

            Interfaces

            interface SwipeableHandlers

            interface SwipeableHandlers {}

              method onMouseDown

              onMouseDown: (event: React.MouseEvent) => void;

                method ref

                ref: (element: HTMLElement | null) => void;

                  interface SwipeEventData

                  interface SwipeEventData {}

                    property absX

                    absX: number;

                    • Absolute displacement of swipe in x. Math.abs(deltaX);

                    property absY

                    absY: number;

                    • Absolute displacement of swipe in y. Math.abs(deltaY);

                    property deltaX

                    deltaX: number;

                    • Displacement of swipe in x. (current.x - initial.x)

                    property deltaY

                    deltaY: number;

                    • Displacement of swipe in y. (current.y - initial.y)

                    property dir

                    dir: SwipeDirections;

                    • Direction of swipe - Left | Right | Up | Down

                    property event

                    event: HandledEvents;

                    • Source event.

                    property first

                    first: boolean;

                    • True for the first event of a tracked swipe.

                    property initial

                    initial: Vector2;

                    • Location where swipe started - [x, y].

                    property velocity

                    velocity: number;

                    • "Absolute velocity" (speed) - √(absX^2 + absY^2) / time

                    property vxvy

                    vxvy: Vector2;

                    • Velocity per axis - [ deltaX/time, deltaY/time ]

                    Type Aliases

                    type SwipeableDirectionCallbacks

                    type SwipeableDirectionCallbacks = {
                        /**
                         * Called after a DOWN swipe
                         */
                        onSwipedDown: SwipeCallback;
                        /**
                         * Called after a LEFT swipe
                         */
                        onSwipedLeft: SwipeCallback;
                        /**
                         * Called after a RIGHT swipe
                         */
                        onSwipedRight: SwipeCallback;
                        /**
                         * Called after a UP swipe
                         */
                        onSwipedUp: SwipeCallback;
                    };

                      type SwipeableProps

                      type SwipeableProps = Partial<SwipeableCallbacks & ConfigurationOptions>;

                        type SwipeCallback

                        type SwipeCallback = (eventData: SwipeEventData) => void;

                          type SwipeDirections

                          type SwipeDirections = typeof LEFT | typeof RIGHT | typeof UP | typeof DOWN;

                            type TapCallback

                            type TapCallback = ({ event }: { event: HandledEvents }) => void;

                              type Vector2

                              type Vector2 = [number, number];

                                Package Files (2)

                                Dependencies (0)

                                No dependencies.

                                Dev Dependencies (25)

                                Peer Dependencies (1)

                                Badge

                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-swipeable.

                                • Markdown
                                  [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-swipeable)
                                • HTML
                                  <a href="https://www.jsdocs.io/package/react-swipeable"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>