chayns-swipeable

A wrapper component that reveals contextual actions on swipe.

Installation

npm install chayns-swipeable framer-motion

Usage

import { Swipeable } from "chayns-swipeable";
import "chayns-swipeable/dist/index.css";
import { Icon } from "chayns-components";

const MyComponent = () => (
  <Swipeable
    leftActions={[
      {
        color: "#3B82F6",
        text: "Delete",
        icon: <Icon icon={`fas ${isUnread ? "fa-check" : "fa-envelope"}`} />,
        action: () => alert("Deleted!"),
      },
    ]}
    rightActions={
      [
        // Same as `leftActions`
      ]
    }
  >
    Anything goes here...
  </Swipeable>
);