useCopyToClipboard

useCopyToClipboard hooki, React dasturida matnni clipboardga osonlik bilan nusxalash imkonini beradi.

useCopyToClipboard Hook

useCopyToClipboard hooki, React dasturida matnni clipboardga osonlik bilan nusxalash imkonini beradi. U nusxalangan matn holatini boshqaradi va clipboard bilan muloqotni ta'minlaydi.

Parametrlar

Ushbu hook hech qanday parametr olmaydi.

Qaytaradi

• state: string | null: Oxirgi nusxalangan qiymatni yoki hech qanday matn nusxalanmaganda yoki nusxalashda xato yuz berganda null ni saqlaydigan holat.
• copyToClipboard: (value: string) => void: String qiymatini qabul qiluvchi va uni clipboardga nusxalaydigan funksiya.

Misol

Kirish Matnini Clipboardga Nusxalash

Ushbu misolda, useCopyToClipboard hooki kirish maydonidan matnni clipboardga nusxalash uchun ishlatiladi. Nusxalangan matn ham kirish maydonidan pastda ko'rsatiladi.

import React, { useState } from "react";
import { useCopyToClipboard } from "@udemere/usehooks";
 
const CopyTextComponent = () => {
  const [state, copyToClipboard] = useCopyToClipboard();
  const [inputValue, setInputValue] = useState("");
 
  const handleCopyClick = () => {
    copyToClipboard(inputValue);
  };
 
  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Nusxalanadigan matnni kiriting"
      />
      <button onClick={handleCopyClick}>Clipboardga nusxala</button>
      {state && <p>Nusxalangan Matn: {state}</p>}
    </div>
  );
};
 
export default CopyTextComponent;

Tugmada Foydalanish

import React from 'react'
import { useCopyToClipboard } from '@udemere/usehooks'
 
const CopyButtonComponent = () => {
	const [copiedText, copyToClipboard] = useCopyToClipboard()
 
	return (
		<div>
			<button onClick={() => copyToClipboard('Nusxalanadigan ba'zi matn')}>
				Matnni nusxala
			</button>
			{copiedText && <p>Nusxalangan: {copiedText}</p>}
		</div>
	)
}
 
export default CopyButtonComponent

Muhim Eslatmalar:

• Clipboard API: Ushbu hook Clipboard API dan foydalanadi, bu barcha brauzerlarda qo'llab-quvvatlanmasligi mumkin. Ishlatishdan oldin brauzerning uni qo'llab-quvvatlashiga ishonch hosil qiling.
• Holatni Boshqarish: Hookdan qaytarilgan state foydalanuvchiga muvaffaqiyatli nusxalangan matn haqida ma'lumot berish imkonini beradi.