custom-swipe
Advanced tools
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.
Explore the possibilities with Custom-Swipe and elevate your frontend development experience. demo
1.yarn
yarn add custom-swipe
2.npm
npm install custom-swipe
<!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/custom-swipe@0.0.1/+esm';
defineSwipe();
const swipe = document.querySelector('custom-swipe');
swipe.addEventListener('swipecb', (e) => {
console.log(e.detail);
});
</script>
</html>
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);
children: HTMLElement swipe items.config?: ConfigProps swipe option config.
isHistory?: boolean history change or push(default: false)(true ? push : replace).paramName?: string querystring key name(default: index).direction?: row | column use vertical swipe option.(default: row).swipecb: CustomEvents type 'swipecb' swipe end to cb user custom event. detail is swipe state.dom: HTMLElement events target.config?: ConfigProps swipe option config.
isHistory?: boolean history change or push(default: false)(true ? push : replace).paramName?: string querystring key name(default: index).historyCallback?: (state: SwipeStateProps) => void swipeEnd event custom callback props swipe state.direction?: row | column use vertical swipe option.(default: row)useSwipe(hook) return
swipeEvents: 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: VoidFunction swipe init events handler.MIT
FAQs
HTML webcomponents version swipe feature components
We found that custom-swipe demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.