React-swipe-to-reveal-actions NPM

A swipeable (list) item component that can reveal a set of actions - iOS style. Uses react-swipeable for gesture detection.

🏠 Homepage

Demo-gif

Install

yarn add react-swipe-to-reveal-actions

Usage (see /example directory for more)

import SwipeToRevealActions from "react-swipe-to-reveal-actions";

export default const MyListItem = () => {
    return (
        <SwipeToRevealActions
            actionButtons={[
                {
                    content: (
                        <div className="your-className-here">
                            <span>EDIT</span>
                        </div>
                    ),
                    onClick: () => alert('Pressed the EDIT button'),
                },
                {
                    content: (
                        <div className="your-className-here">
                            <span>DELETE</span>
                        </div>
                    ),
                    onClick: () => alert('Pressed the DELETe button'),
                },
            ]}
            actionButtonMinWidth={70}
        >
            Swipe me to reveal actions
        </SwipeToRevealActions>
    );
};

Props

Required props are marked with *.

Name	Type	Default	Description
`children`*	`React.ReactNode`	`-`	The content of the item itself
`actionButtons`*	`{ content: React.ReactNode \ Element; onClick: () => void; role?: string; }[]`	`-`	An array objects with the contents and onClicks for each action button
`actionButtonMinWidth`*	`number`	`-`	The minimum width of each action button (px)
`height`	`string`	`56px`	The height of the item. Can be px, rem or em - that's why this is a string
`containerStyle`	`React.CSSProperties`	`-`	Optional styles for the item container
`onOpen`	`() => void`	`-`	Callback when item is expanded by swipe or click
`onClose`	`() => void`	`-`	Callback when item is collapsed by swipe or click
`hideDotsButton`	`boolean`	`-`	Hides the three dots that can be clicked to expand the item
`dotsBtnAriaLabel`	`string`	`Click to reveal actions`	a11y label text for the dots button