Philosophy is the separation of rendering and tool.

Install

yarn add @zalelion/hooks

import {
    useOnDrag,
    useOnLongTouch,
    useOnPress,
    useOnResizable,
    useOnScroll,
    mergeListener} from  "@zalelion/hooks"

useOnPress

const [is, set] = useState(false);
// listeners is {onTouchStart,onTouchMove,onTouchEnd}
const listeners = useOnPress(function (event:TouchEvent) {
    set(true);
});
return <div {...listener}>{is ? "true" : "false"}</div>

useOnLongTouch

const [is, set] = useState(false);

// listeners is {onTouchStart,onTouchMove,onTouchEnd}// 
const listener = useOnLongTouch(function () {
    set(true);
});
return <div {...listener} >{is ? "true" : "false"}</div>

useOnDrag

const listener = useOnDrag({
        onStart(event){
            // event is native start touchevent
        },
        onDrag(event, { x, y, offsetX, offsetY }) {
            // event is native move touchevent
        },
        onEnd(event) {
            // event is native end touchevent
        }
    }, 
    [],  // DependencyList @see useEffect(()=>{},[])
    { x: 10, y: 10 });  // This is the value before the move

Merge multiple hook's listeners

import {mergeListener, useOnPress, useOnLongTouch} from "@zalelion/hooks";

const [isPress, setIsPress] = useState(false);
const [isLongTouch, setIsLongTouch] = useState(false);

const pressListener = useOnPress(function (event:TouchEvent) {
    setIsPress(true);
});

const longTouchListener = useOnLongTouch(function () {
    setIsLongTouch(true);
});
return <div {...mergeListener(pressListener,longTouchListener)} >
    <div>  {isPress ? "isPress" : ""} </div>
    <div>  {isLongTouch ? "isLongTouch" : ""} </div>
</div>

LICENSE

MIT