Slide-to-action NPM

Slide To Action

A simple slide to action React component.

demo

Installation

yarn add slide-to-action
# or with npm
npm install slide-to-action

Usage

import { SlideToAction } from 'slide-to-action';

const Save = () => <div>Save</div>;
const Delete = () => <div>Delete</div>;

const App = () => {
  return (
    <SlideToAction Content={<div>hello world</div>} actions={[Save, Delete]} />
  );
};

Props

Name	Type	Default	Description
Content	React.ReactNode	None	The content to be displayed.
actions	Action[]	None	The actions to be displayed.
actionsWidth	number	0.35	The width of the actions.
openFrom	'Left'	'Right' \| 'Left'	The direction from which the actions will open.

Action Props

Name	Type	Default	Description
index	number	None	The index of the action.
progress	number	None	The progress of the action. (0-1.5)
close	() => void	None	A function to close the action.

TODO

Add tests
Add more examples
Remove actions & openFrom props and use actionsRight and actionsLeft instead
Add apply first action on swipe right/left
Provide actions components with utilities to handle animation

react react-dom react-swipeable

@everything-registry/sub-chunk-2780

0.6.0

8 months ago

0.5.0

8 months ago