# swiper-action

> simple component for swipe-to-action

Latest version **0.1.3** (published 2023-08-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install swiper-action
pnpm add swiper-action
yarn add swiper-action
bun add swiper-action
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-08-28 |
| First published | 2023-06-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 37.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | cuvar |
| Maintainers | cuvar |
| Keywords | npm, javascript, typescript, react, swipe, action |

## Links

- npm: https://www.npmjs.com/package/swiper-action
- Repository: https://github.com/cuvar/swiper-action
- Homepage: https://github.com/cuvar/swiper-action#readme
- Issues: https://github.com/cuvar/swiper-action/issues
- npm.io page: https://npm.io/package/swiper-action

## Dependencies (1)

- [jotai](https://npm.io/package/jotai.md) ^1.13.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2023-08-28
- 0.1.2 — 2023-08-28
- 0.1.1 — 2023-08-20
- 0.1.0 — 2023-08-20
- 0.0.8 — 2023-08-17
- 0.0.7 — 2023-08-16
- 0.0.6 — 2023-08-16
- 0.0.5 — 2023-06-11
- 0.0.4-development — 2023-06-11
- 0.0.3-development — 2023-06-11
- 0.0.2-development — 2023-06-11
- 0.0.1-development — 2023-06-11
- 0.0.1 — 2023-06-11
- 0.0.0-development — 2023-06-11

## README

# swiper-action
Simple react component for swipe-to-action.

## ⚠️ Disclaimer
This project is still in its early stages. If you have ideas for improvements, open an issue or a pull request!

## 🚀 Getting started
You can install this package using your favorite package manager:

```npm install swiper-action```

There are two components: 
- `SwiperAction`: acts as the outer container for your content.
- `Action`: used for the definition of your "swipe-to-actions" actions. The handler for each action receives an `InteractionEvent` that can either be a `MouseEvent` or a `TouchEvent`.


```jsx
import { SwiperAction, Action } from "swiper-action";

function Example() {
  const actions = [
    <Action action={(e) => handleClick(e)} key={1}>
      <div className="flex h-full flex-col justify-center">
        action
      </div>
    </Action>,
    <Action action={(e) => handleClick(e)} key={2}>
      <div className="flex h-full flex-col justify-center">
        action2
      </div>
    </Action>,
  ];

  return (
    <SwiperAction actions={actions}>
      <div>Content</div>
    </SwiperAction>
  );
}
```

In the end, this should look something like this image:
![alt text](res/example.png)

### Caveats
1. Currently, the `key` prop needs to be set manually for the `Action` component. This will likely be fixed in the future.
2. The width and height of the outer container for the `SwiperAction` component need to be set explicitly.


## ⚙️ Contributing
This project is just getting started. Hence, feel free to open issues and pull requests!

---
_Source: https://npm.io/package/swiper-action · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._