@yamada-ui/react/dist/esm/hooks/use-clipboard/index.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { useCallback, useEffect, useState } from "react";
import copy from "copy-to-clipboard";

//#region src/hooks/use-clipboard/index.ts
/**
* `useClipboard` is a custom hook that performs the operation of copying a value to the clipboard.
*
* @see https://yamada-ui.com/docs/hooks/use-clipboard
*/
const useClipboard = (defaultValue = "", timeoutOrOptions = {}) => {
	const [copied, setCopied] = useState(false);
	const [value, setValue] = useState(defaultValue);
	useEffect(() => setValue(defaultValue), [defaultValue]);
	const { timeout = 1500,...copyOptions } = (0, utils_exports.isNumber)(timeoutOrOptions) ? { timeout: timeoutOrOptions } : timeoutOrOptions;
	const onCopy = useCallback((newValue) => {
		if (!(0, utils_exports.isString)(newValue)) newValue = value;
		else setValue(newValue);
		setCopied(copy(newValue, copyOptions));
	}, [value, copyOptions]);
	useEffect(() => {
		let timeoutId = null;
		if (copied) timeoutId = setTimeout(() => {
			setCopied(false);
		}, timeout);
		return () => {
			if (timeoutId) clearTimeout(timeoutId);
		};
	}, [timeout, copied]);
	return {
		copied,
		setValue,
		value,
		onCopy
	};
};

//#endregion
export { useClipboard };
//# sourceMappingURL=index.js.map