https://github.com/cuvar/swiper-action

simple component for swipe-to-action
https://github.com/cuvar/swiper-action

Last synced: 9 days ago
JSON representation

simple component for swipe-to-action

• Host: GitHub
• URL: https://github.com/cuvar/swiper-action
• Owner: cuvar
• License: mit
• Created: 2023-02-28T09:28:34.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-11-14T18:30:07.000Z (over 2 years ago)
• Last Synced: 2025-11-27T10:51:33.908Z (7 months ago)
• Language: TypeScript
• Homepage:
• Size: 412 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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!

## Idea

Using this library "swipe-to-action" can be implemented easily. The idea is to have a container that contains the content and the actions. The actions are hidden by default and are only shown when the user swipes the content to the left or right. The actions can then be clicked to perform an action.

## 🚀 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 = [

     handleClick(e)} key={1}>

      


        action

      

    ,

     handleClick(e)} key={2}>

      


        action2

      

    ,

  ];


  return (

    

      
Content

    

  );

}

```


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

Pull requests are welcome. For major changes, please open an issue first

to discuss what you would like to change.

## License

This project is licensed under the [MIT](./LICENSE) license.