useLinkClickHandler

declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
    to: To,
    options?: {
        target?: HTMLAttributeAnchorTarget;
        replace?: boolean;
        state?: any;
    }
): (event: MouseEvent<E>) => void;

The useLinkClickHandler hook returns a click event handler for navigation when building a custom <Link>.

import { useHref, useLinkClickHandler } from '@archibald/core';

import { forwardRef } from 'react';

const StyledLink = styled('a', { color: 'fuchsia' });

function Link({ onClick, replace = false, state, target, to, ref, ...rest }) {
    const href = useHref(to);
    const handleClick = useLinkClickHandler(to, {
        replace,
        state,
        target
    });

    return (
        <StyledLink
            {...rest}
            href={href}
            onClick={(event) => {
                onClick?.(event);
                if (!event.defaultPrevented) {
                    handleClick(event);
                }
            }}
            ref={ref}
            target={target}
        />
    );
}