wix-style-react/dist/es/src/providers/useCopyClipboard/useCopyClipboard.js

wix-style-react

import { useState, useCallback, useEffect } from 'react';
/**
 * @typedef {Object} Clipboard
 * @prop {boolean} isCopied - a return boolean with status of clipboard action
 * @prop {function} copyToClipboard - a return function that allows to initiate copying
 * @prop {function} resetState - an optional return function
 */
/**
 * A custom hook for copying to clipboard. Returns copying to clipboard status and function to initiate copying to clipboard
 * @param {Object} props -  an object for value, onCopy, and resetTimeout props
 * @param {string} props.value -  a string that should be copied to clipboard
 * @param {function} [props.onCopy] - an optional parameter to apply additional logic when copying to clipboard
 * @param {number} [props.resetTimeout] - an optional parameter to set interval which after copying to clipboard will reset status
 * @return {Clipboard}
 */
function useCopyClipboard({ value, onCopy, resetTimeout }) {
    const [isCopied, setCopied] = useState(null);
    const copyToClipboard = useCallback(() => {
        navigator.clipboard.writeText(value).then(() => {
            setCopied(true);
            onCopy?.();
        });
    }, [value, onCopy]);
    const reset = useCallback(() => {
        setCopied(null);
    }, [setCopied]);
    useEffect(() => {
        let timeout;
        if (isCopied && resetTimeout) {
            timeout = setTimeout(reset, resetTimeout);
        }
        return () => {
            clearTimeout(timeout);
        };
    }, [isCopied, reset, resetTimeout]);
    useEffect(reset, [value, reset]);
    return { isCopied, copyToClipboard, reset };
}
export default useCopyClipboard;
//# sourceMappingURL=useCopyClipboard.js.map