Zero-styled swipeable component using react-swipeable for gesture detection compatible with Next.js, allowing full customization and styling of swiping component and revealed content.
npm i react-swipe-to-show
import SwipeToShow from "react-swipe-to-show";
import { AccordionInfo } from "./accordion";
export interface ItemRow {
item: string;
id: string;
}
interface TableProps {
rows: any;
deleteRow: (index: string) => void;
editRow: (index: string | null) => void;
}
export const AccordionTable: React.FC<TableProps> = ({ rows, deleteRow, editRow }) => {
const Buttons = ({ currentRow }: { currentRow: ItemRow }) => {
return (
<div className="flex flex-row">
<PencilSquareIcon
key="pencil"
className="h-6 w-6"
aria-hidden="true"
onClick={() => editRow(currentRow.id)}
/>
<div className="w-10"></div>
<TrashIcon
key="trash"
className="h-6 w-6"
aria-hidden="true"
onClick={() => deleteRow(currentRow.id)}
/>
</div>
);
};
return (
<div className="flex flex-col">
{rows.map((row: ItemRow) => {
return (
<div key={row.id} className="flex-row">
<SwipeToShow
content={<Buttons currentRow={row}></Buttons>}
swipeLength={20}
contentEndDistance={6.5}
contentStartDistance={0}
>
<AccordionInfo name={row.item}>Hello World!</AccordionInfo>
</SwipeToShow>
</div>
);
})}
</div>
);
};
Required props are marked with *
.
Name | Type | Default | Description |
---|---|---|---|
children * |
React.ReactNode |
- |
Swipeable content trigger for component |
content * |
React.ReactNode |
- |
Revealed content for component. Wider contents can result in undesired behavior |
viewportMode |
string |
optimized |
Choice for desired viewport to be used in swiping distance calculation. optimized elects to use smaller viewport between height and width, height uses viewport height, and width uses viewport width |
swipeLength * |
number |
- |
Length as percent of desired viewport dimension |
contentEndDistance * |
number |
- |
End distance of revealed content |
contentStartDistance |
number |
0 |
Start distance of revealed content |
onOpen |
() => void |
- |
Function called when item is opened |
onClose |
() => void |
- |
Function called when item is closed |
Ethan Guo
-
Github: @elliasc04
-
LinkedIn: @elliasc04
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
Copyright © 2024 Ethan guo.
This project is MIT licensed.