Slide To Action

A simple slide to action React component.

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