custom-swipe
v0.0.2
Published
HTML webcomponents version swipe feature components
Downloads
2
Maintainers
isa(yunjongryu)Readme
custom-swipe
Custom-Swipe: A Lightweight and Headless Frontend Library
Custom-Swipe is a versatile solution designed for seamless user interactions in web applications. Whether you're building a responsive web app or enhancing the user experience on various devices, Custom-Swipe offers a range of swipe features. It serves as both a basic component for easy integration and a powerful headless hook for developers seeking granular control.
Key Features
- Lightweight: Minimize your bundle size with our lightweight library.
- Responsive: Ensure smooth interactions across various devices and screen sizes.
- Customizable: Tailor swipe behavior to suit your application's specific needs.
- Headless Hook: For developers who prefer a programmatic approach, our headless hook provides extensive control over swipe events.
Explore the possibilities with Custom-Swipe and elevate your frontend development experience. demo
Install
1.yarn
yarn add custom-swipe2.npm
npm install custom-swipeUse Example
- Use Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>swipe</h1>
<custom-swipe
direction="column"
swipecss=".swipe-container{height: 200px; background: blue;} .item {width: 100%;
height: 200px;
background-color: aqua;
border: red 1px solid;} "
paramname="index"
isHistory="false"
>
<p class="item">1</p>
<p class="item">2</p>
<p class="item">3</p>
</custom-swipe>
</body>
<script type="module">
import {
useSwipe,
defineSwipe,
} from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
defineSwipe();
const swipe = document.querySelector('custom-swipe');
swipe.addEventListener('swipecb', (e) => {
console.log(e.detail);
});
</script>
</html>
- Use Hook
import { useSwipe } from 'custom-swipe';
const swipeWrap = document.querySelector('.swipe-wrap');
const { events, resize, init } = useSwipe(wrap, {
isHistory: false,
paramName: 'index',
direction: 'row',
historyCallback: (state) => console.log(state),
});
window.addEventListener('resize', resize, {
passive: true,
});
for (const [key, value] of Object.entries(events)) {
wrap.addEventListener(key, value, { passive: true });
}
setTimeout(init, 0);PROPS
- custom-swipe(component)
children:HTMLElementswipe items.config?:ConfigPropsswipe option config.isHistory?:booleanhistory change or push(default: false)(true ? push : replace).paramName?:stringquerystring key name(default: index).direction?:row | columnuse vertical swipe option.(default: row).
swipecb:CustomEventstype 'swipecb' swipe end to cb user custom event. detail is swipe state.
- useSwipe(hook)
dom:HTMLElementevents target.config?:ConfigPropsswipe option config.isHistory?:booleanhistory change or push(default: false)(true ? push : replace).paramName?:stringquerystring key name(default: index).historyCallback?:(state: SwipeStateProps) => voidswipeEnd event custom callback props swipe state.direction?:row | columnuse vertical swipe option.(default: row)
useSwipe(hook) returnswipeEvents:UseSwipeEvents<T>; React Swipe Event handlers.handleSlide:(flag: 'L' | 'R') => void; use Slide handler.changeIndex:(index: number) => void; use goto index handler.resize:VoidFunctionswipe resize events handler.init:VoidFunctionswipe init events handler.
Features
- swipe
- Infinite swipe(scroll)
LICENSE
MIT