react-swipe-to-show

react-swipe-to-show

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.

Homepage

Install

npm i react-swipe-to-show

Usage Example

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>
	);
};

Props

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

Author

Ethan Guo

• Github: @elliasc04

• LinkedIn: @elliasc04

Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

License

Copyright © 2024 Ethan guo.

This project is MIT licensed.