@koine/react 2.0.0-beta.72 → 2.0.0-beta.74

package/classed.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type ClassedAugmentedProps<Props> = Props & {
+    className?: string;
+    ref?: React.Ref<any>;
+};
+type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? React.HTMLProps<Component> & ClassedAugmentedProps<Props> : ClassedAugmentedProps<Props>;
+export declare let classed: <Props, Component extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = any>(component: Component) => (strings: TemplateStringsArray, ...args: ((props: Props) => string)[] | string[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ClassedFinalProps<Props, Component>> & React.RefAttributes<Component>>;
+export default classed;

package/classed.js

@@ -0,0 +1,41 @@
+import React, { createElement, forwardRef } from "react";
+export let classed = (component) => {
+    const type = component.type || component;
+    return function (strings, ...args) {
+        const WrappedComponent = forwardRef(function (props, ref) {
+            const argResolved = args
+                .map((arg, index) => {
+                let result = "";
+                if (typeof arg === "function") {
+                    result = arg(props);
+                }
+                else if (typeof arg !== "undefined") {
+                    result = arg.toString();
+                }
+                return strings[index] + result;
+            })
+                .join("");
+            const isNativeHtmlElement = typeof type === "string";
+            const propsToForward = isNativeHtmlElement
+                ? {}
+                : props;
+            if (isNativeHtmlElement) {
+                for (const key in props) {
+                    if (!key.startsWith("$")) {
+                        propsToForward[key] = props[key];
+                    }
+                }
+            }
+            let className = argResolved || strings[0];
+            className = className.match(/class="([^"]*)/)?.[1] || className;
+            className += props?.className ? " " + props?.className : "";
+            return createElement(type, {
+                ...propsToForward,
+                className: className || undefined,
+                ref,
+            });
+        });
+        return WrappedComponent;
+    };
+};
+export default classed;

package/components/FaviconTags.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export let FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), _jsx("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), _jsx("link", { rel: "manifest", href: "/site.webmanifest" }), _jsx("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), _jsx("meta", { name: "apple-mobile-web-app-title", content: name }), _jsx("meta", { name: "application-name", content: name }), _jsx("meta", { name: "msapplication-TileColor", content: tileColor || color }), _jsx("meta", { name: "theme-color", content: themeColor || color })] }));
+};

package/components/Meta.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export let Meta = ({ zoom }) => {
+    return (_jsx("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}` }));
+};

package/components/NoJs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export let NoJs = (_props) => {
+    return (_jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
+            __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`,
+        } }));
+};

package/createUseMediaQueryWidth.d.ts

@@ -0,0 +1,6 @@
+import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
+type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
+export type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
+export type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;
+export declare let createUseMediaQueryWidth: <TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig) => <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: `@${TBreakpoints}` | `@min-${TBreakpoints}` | `@max-${TBreakpoints}` | `@up-${TBreakpoints}` | `@down-${TBreakpoints}` | `@between-${TBreakpoints}_${TBreakpoints}` | `@only-${TBreakpoints}`, serverValue?: null | boolean) => boolean | null;
+export default createUseMediaQueryWidth;

package/createUseMediaQueryWidth.js

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { getMediaQueryWidthResolvers, isUndefined, } from "@koine/utils";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+export let createUseMediaQueryWidth = (customBreakpoints) => {
+    const queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
+    return function useMediaQueryWidth(media, serverValue) {
+        const definition = media.substring(1);
+        let [rule, ruleBreakpoint] = definition.split("-");
+        if (isUndefined(ruleBreakpoint)) {
+            ruleBreakpoint = rule;
+        }
+        if (isUndefined(rule)) {
+            rule = "min";
+        }
+        const [br1, br2] = ruleBreakpoint.split("_");
+        const query = queryResolvers[rule](br1, br2);
+        const [matches, setMatches] = useState(isUndefined(serverValue) ? null : serverValue);
+        useIsomorphicLayoutEffect(() => {
+            const mq = window.matchMedia(query);
+            const handleChange = (event) => {
+                setMatches(event.matches);
+            };
+            setMatches(mq.matches);
+            if (!mq.addEventListener) {
+                mq.addListener(handleChange);
+                return () => {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return () => {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+};
+export default createUseMediaQueryWidth;

package/extendComponent.d.ts

@@ -0,0 +1,16 @@
+export type ExtendableComponent<Props = any> = React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
+export declare let extendComponent: <Component extends ExtendableComponent<any>, DefaultProps extends {}>(component: Component, defaultProps: DefaultProps) => ((props: import("react").ComponentProps<Component>) => import("react").FunctionComponentElement<any>) & DefaultProps & {
+    defaultProps: DefaultProps;
+};
+export interface OverridableComponents {
+    [key: string]: {
+        type: React.ElementType;
+        props: any;
+        motionable?: boolean;
+    };
+}
+export type WithComponents<Props, Components extends OverridableComponents> = Props & {
+    [Name in keyof Components]: NonNullable<Components[Name]["type"] extends keyof JSX.IntrinsicElements ? React.ElementType<Components[Name]["motionable"] extends true ? Omit<React.ComponentPropsWithoutRef<Components[Name]["type"]>, HtmlAttributesCollidingWithMotionProps> & Components[Name]["props"] : React.ComponentPropsWithoutRef<Components[Name]["type"]> & Components[Name]["props"]> : Components[Name]["type"]>;
+};
+type HtmlAttributesCollidingWithMotionProps = "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd";
+export default extendComponent;

package/extendComponent.js

@@ -0,0 +1,9 @@
+import { createElement } from "react";
+export let extendComponent = (component, defaultProps) => {
+    const NewComponent = (props) => createElement(component, props);
+    return Object.assign(NewComponent, {
+        ...defaultProps,
+        defaultProps,
+    });
+};
+export default extendComponent;

package/forms/antispam.js

@@ -0,0 +1,29 @@
+import { object } from "@kuus/yup";
+import { decode, encode, isUndefined } from "@koine/utils";
+export let encodeForm = (validationRules) => {
+    const encoded = {};
+    const encodedNames = {};
+    for (const name in validationRules) {
+        if (!name.startsWith("_")) {
+            const encodedName = encode(name);
+            encoded[encodedName] = validationRules[name];
+            encodedNames[name] = encodedName;
+        }
+    }
+    const encodedSchema = object(encoded).required();
+    return { encodedSchema, encodedNames };
+};
+export let decodeForm = (formData) => {
+    const json = {};
+    for (const encodedName in formData) {
+        const decodedName = decode(encodedName);
+        if (encodedName.startsWith("_")) {
+            json[encodedName.substring(1)] = formData[encodedName];
+        }
+        else if (!isUndefined(formData[encodedName]) &&
+            formData[decodedName] === "") {
+            json[decodedName] = formData[encodedName];
+        }
+    }
+    return json;
+};

package/forms.js

@@ -0,0 +1 @@
+export * from "./forms/antispam";

package/hooks/index.js

@@ -0,0 +1,19 @@
+export { useAsyncFn, } from "./useAsyncFn";
+export { useFirstMountState } from "./useFirstMountState";
+export { useFixedOffset } from "./useFixedOffset";
+export { useFocus } from "./useFocus";
+export { useInterval } from "./useInterval";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+export { useKeyUp } from "./useKeyUp";
+export { useMeasure, } from "./useMeasure";
+export { useMountedState } from "./useMountedState";
+export { useNavigateAway, } from "./useNavigateAway";
+export { usePrevious } from "./usePrevious";
+export { usePreviousRef } from "./usePreviousRef";
+export { useScrollPosition } from "./useScrollPosition";
+export { useScrollThreshold } from "./useScrollThreshold";
+export { useSmoothScroll } from "./useSmoothScroll";
+export { useSpinDelay } from "./useSpinDelay";
+export { useTraceUpdate } from "./useTraceUpdate";
+export { useUpdateEffect } from "./useUpdateEffect";
+export { useWindowSize } from "./useWindowSize";

package/hooks/useAsyncFn.js

@@ -0,0 +1,25 @@
+import React, { useCallback, useRef, useState } from "react";
+import { useMountedState } from "./useMountedState";
+export let useAsyncFn = (fn, deps = [], initialState = { loading: false }) => {
+    const lastCallId = useRef(0);
+    const isMounted = useMountedState();
+    const [state, set] = useState(initialState);
+    const callback = useCallback((...args) => {
+        const callId = ++lastCallId.current;
+        if (!state.loading) {
+            set((prevState) => ({ ...prevState, loading: true }));
+        }
+        return fn(...args).then((value) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ value, loading: false });
+            return value;
+        }, (error) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ error, loading: false });
+            return error;
+        });
+    }, deps);
+    return [state, callback];
+};

package/hooks/useFirstMountState.js

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+export let useFirstMountState = () => {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+};

package/hooks/useFixedOffset.js

@@ -0,0 +1,41 @@
+import { useRef } from "react";
+import { debounce } from "@koine/utils";
+import { $each, calculateFixedOffset, injectCss, listenResizeDebounced, } from "@koine/dom";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+const inject = (value) => {
+    injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
+};
+export let useFixedOffset = (selector) => {
+    const fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(() => {
+        const update = () => {
+            const newFixedOffset = calculateFixedOffset();
+            fixedOffset.current = newFixedOffset;
+            inject(newFixedOffset);
+        };
+        update();
+        if (ResizeObserver) {
+            const observer = new ResizeObserver((entries) => {
+                let newFixedOffset = 0;
+                entries.forEach((entry) => {
+                    newFixedOffset += entry.contentRect.height;
+                });
+                fixedOffset.current = newFixedOffset;
+                const updateOnResize = debounce(() => inject(newFixedOffset), 400, true);
+                updateOnResize();
+            });
+            $each(selector || "[data-fixed]", ($el) => {
+                if (observer)
+                    observer.observe($el);
+            });
+            return () => {
+                observer?.disconnect();
+            };
+        }
+        else {
+            const listener = listenResizeDebounced(0, update);
+            return listener;
+        }
+    }, [selector]);
+    return fixedOffset;
+};

package/hooks/useFocus.js

@@ -0,0 +1,8 @@
+import { useRef } from "react";
+export let useFocus = () => {
+    const elementRef = useRef(null);
+    const setFocus = () => {
+        elementRef.current && elementRef.current.focus();
+    };
+    return [elementRef, setFocus];
+};

package/hooks/useInterval.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { noop } from "@koine/utils";
+export let useInterval = (callback, delay, deps = []) => {
+    const savedCallback = useRef();
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback, ...deps]);
+    useEffect(() => {
+        function tick() {
+            if (savedCallback.current)
+                savedCallback.current();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+        return noop;
+    }, [delay]);
+};

package/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isBrowser } from "@koine/utils";
+export let useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;

package/hooks/useKeyUp.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { on } from "@koine/dom";
+export let useKeyUp = (callback, deps = []) => {
+    useEffect(() => {
+        const listener = on(window, "keyup", (event) => {
+            if (!event.ctrlKey &&
+                !event.altKey &&
+                !event.shiftKey &&
+                !event.metaKey) {
+                callback(event);
+            }
+        });
+        return listener;
+    }, [callback, ...deps]);
+};

package/hooks/useMeasure.js

@@ -0,0 +1,118 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { debounce, noop } from "@koine/utils";
+import { listenResizeDebounced, listenScrollDebounced, off, on, } from "@koine/dom";
+let observer;
+let findScrollContainers = (element) => {
+    const result = [];
+    if (!element || element === document.body)
+        return result;
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(element);
+    if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll"))
+        result.push(element);
+    return [...result, ...findScrollContainers(element.parentElement)];
+};
+const keys = [
+    "x",
+    "y",
+    "top",
+    "bottom",
+    "left",
+    "right",
+    "width",
+    "height",
+];
+const areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
+export let useMeasure = (options) => {
+    const { scroll = false } = options || {};
+    const [bounds, setBounds] = useState({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0,
+    });
+    const state = useRef([
+        null,
+        null,
+        null,
+        bounds,
+    ]);
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+        return () => void (mounted.current = false);
+    }, []);
+    const [forceRefresh, , scrollChange] = useMemo(() => {
+        const callback = (..._args) => {
+            const [element, , , lastBounds] = state.current;
+            if (!element)
+                return;
+            const size = element.getBoundingClientRect();
+            Object.freeze(size);
+            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
+                state.current[3] = size;
+                setBounds(size);
+            }
+        };
+        const debouncedCallback = debounce(callback);
+        return [callback, debouncedCallback, debouncedCallback];
+    }, [setBounds]);
+    function removeListeners() {
+        const [, scrollContainers, resizeObserver] = state.current;
+        if (scrollContainers) {
+            scrollContainers.forEach((element) => off(element, "scroll", scrollChange));
+            state.current[1] = null;
+        }
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            state.current[2] = null;
+        }
+    }
+    function addListeners() {
+        const [element, scrollContainers] = state.current;
+        if (!element)
+            return;
+        if (!observer && ResizeObserver) {
+            observer = new ResizeObserver(scrollChange);
+            state.current[2] = observer;
+            observer.observe(element);
+            if (scroll && scrollContainers) {
+                scrollContainers.forEach((scrollContainer) => on(scrollContainer, "scroll", scrollChange, {
+                    capture: true,
+                    passive: true,
+                }));
+            }
+        }
+    }
+    const ref = (node) => {
+        if (!node || node === state.current[0])
+            return;
+        removeListeners();
+        state.current[0] = node;
+        state.current[1] = findScrollContainers(node);
+        addListeners();
+    };
+    useEffect(() => {
+        if (scroll) {
+            const listener = listenScrollDebounced(0, forceRefresh, 100);
+            return listener;
+        }
+        return noop;
+    }, [scroll, forceRefresh]);
+    useEffect(() => {
+        const listener = listenResizeDebounced(0, forceRefresh, 100);
+        return listener;
+    }, [forceRefresh]);
+    useEffect(() => {
+        removeListeners();
+        addListeners();
+    }, [scroll]);
+    useEffect(() => {
+        forceRefresh();
+        return removeListeners;
+    }, []);
+    return [ref, bounds, forceRefresh];
+};

package/hooks/useMountedState.js

@@ -0,0 +1,12 @@
+import { useCallback, useEffect, useRef } from "react";
+export let useMountedState = () => {
+    const mountedRef = useRef(false);
+    const get = useCallback(() => mountedRef.current, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+};

package/hooks/useNavigateAway.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+import { on } from "@koine/dom";
+export let useNavigateAway = (handler) => {
+    const beforeUnloadHandlerRef = useRef();
+    useEffect(() => {
+        beforeUnloadHandlerRef.current = (event) => {
+            const customMessageOrCondition = handler(event);
+            if (customMessageOrCondition) {
+                event.preventDefault();
+            }
+            if (typeof customMessageOrCondition === "string") {
+                return (event.returnValue = customMessageOrCondition);
+            }
+            if (event.defaultPrevented) {
+                return (event.returnValue = "");
+            }
+            return;
+        };
+    }, [handler]);
+    useEffect(() => {
+        const listenerBeforeunload = on(window, "beforeunload", (event) => beforeUnloadHandlerRef.current?.(event));
+        return listenerBeforeunload;
+    }, []);
+};

package/hooks/usePrevious.js

@@ -0,0 +1,8 @@
+import { useState } from "react";
+export let usePrevious = (state, defaulValue) => {
+    const [tuple, setTuple] = useState([state, defaulValue]);
+    if (tuple[1] !== state) {
+        setTuple([tuple[1], state]);
+    }
+    return tuple[0];
+};

package/hooks/usePreviousRef.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from "react";
+export let usePreviousRef = (value) => {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};

package/hooks/useReveal.js

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from "react";
+export let useReveal = ({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all", }) => {
+    const ref = useRef(null);
+    const [startY, setStartY] = useState(0);
+    const [endY, setEndY] = useState(0);
+    const [startX, setStartX] = useState(0);
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const rect = ref.current.getBoundingClientRect();
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const elementHeight = rect.height;
+        const elementTop = rect.top;
+        const distanceTop = elementTop + scrollTop;
+        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
+        const offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
+        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
+        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
+        let startX;
+        if (offsetStartX === "all") {
+            startX = direction === "left" ? -rect.right : rect.left;
+        }
+        else {
+            startX = rect.width * offsetStartX;
+            startX = direction === "left" ? -startX : startX;
+        }
+        setStartY(startY);
+        setEndY(endY);
+        setStartX(startX);
+    }, [
+        setStartY,
+        setEndY,
+        setStartX,
+        offsetStartY,
+        offsetEndY,
+        offsetStartX,
+        direction,
+    ]);
+    return { ref, startY, endY, startX };
+};

package/hooks/useScrollPosition.js

@@ -0,0 +1,57 @@
+import { useRef } from "react";
+import { isBrowser } from "@koine/utils";
+import { listenScroll } from "@koine/dom";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+const zeroPosition = { x: 0, y: 0 };
+const getClientRect = (element) => element?.getBoundingClientRect();
+const getScrollPosition = (element, boundingElement) => {
+    if (!isBrowser) {
+        return zeroPosition;
+    }
+    if (!boundingElement) {
+        return { x: window.scrollX, y: window.scrollY };
+    }
+    const targetPosition = getClientRect(element?.current || document.body);
+    const containerPosition = getClientRect(boundingElement.current);
+    if (!targetPosition) {
+        return zeroPosition;
+    }
+    return containerPosition
+        ? {
+            x: (containerPosition.x || 0) - (targetPosition.x || 0),
+            y: (containerPosition.y || 0) - (targetPosition.y || 0),
+        }
+        : { x: targetPosition.left, y: targetPosition.top };
+};
+export let useScrollPosition = (effect, deps = [], element, boundingElement, wait) => {
+    const position = useRef(getScrollPosition(null, boundingElement));
+    let throttleTimeout = null;
+    const callBack = () => {
+        const current = getScrollPosition(element, boundingElement);
+        effect(current, position.current);
+        position.current = current;
+        throttleTimeout = null;
+    };
+    useIsomorphicLayoutEffect(() => {
+        if (!isBrowser) {
+            return undefined;
+        }
+        const handleScroll = () => {
+            if (wait) {
+                if (throttleTimeout === null) {
+                    throttleTimeout = window.setTimeout(callBack, wait);
+                }
+            }
+            else {
+                callBack();
+            }
+        };
+        const listener = listenScroll(handleScroll, boundingElement?.current);
+        return () => {
+            listener();
+            if (throttleTimeout) {
+                clearTimeout(throttleTimeout);
+            }
+        };
+    }, deps);
+};

package/hooks/useScrollThreshold.js

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useState } from "react";
+import { noop } from "@koine/utils";
+import { listenScroll } from "@koine/dom";
+export let useScrollThreshold = (threshold, callback) => {
+    const [isBelow, setIsBelow] = useState(false);
+    const handler = useCallback(() => {
+        if (threshold) {
+            const posY = window.scrollY;
+            const isAbove = posY < threshold;
+            const isBelow = posY > threshold;
+            setIsBelow(isBelow);
+            if (callback)
+                callback(isAbove, isBelow);
+        }
+    }, [threshold, callback]);
+    useEffect(() => {
+        if (threshold) {
+            const listener = listenScroll(handler);
+            handler();
+            return listener;
+        }
+        return noop;
+    }, [threshold, handler]);
+    return isBelow;
+};

package/hooks/useScrollTo.js

@@ -0,0 +1,17 @@
+import { isBrowser } from "@koine/utils";
+export let useScrollTo = (id = "", offset = 0) => {
+    if (!isBrowser) {
+        return;
+    }
+    const headerOffset = 0;
+    let element = document.getElementById(id);
+    let top = 0;
+    if (element && element.offsetParent) {
+        do {
+            top += element.offsetTop;
+        } while ((element = element.offsetParent));
+    }
+    top -= offset;
+    top -= headerOffset;
+    window.scroll(0, top);
+};