feat: add useClipboard

package.json

@@ -1,8 +1,12 @@
 {
   "name": "@rcuse/monorepo",
+  "type": "module",
   "version": "0.19.0",
   "private": true,
+  "packageManager": "pnpm@8.15.4",
   "description": "Collection of essential React Utilities",
+  "author": "wangxingkang <https://github.com/wangxingkang>",
+  "license": "MIT",
   "scripts": {
     "build": "walrus build-run",
     "build:rollup": "NODE_OPTIONS=\"--max-old-space-size=6144\" rollup --config=rollup.config.ts --configPlugin=rollup-plugin-esbuild",
@@ -22,8 +26,6 @@
     "watch": "walrus build-run --watch",
     "prepare": "husky || true"
   },
-  "author": "wangxingkang <https://github.com/wangxingkang>",
-  "license": "MIT",
   "devDependencies": {
     "@antfu/eslint-config": "^2.8.0",
     "@antfu/ni": "^0.21.12",
@@ -78,8 +80,6 @@
     "vitest": "^1.6.0",
     "walrus": "workspace:*"
   },
-  "type": "module",
-  "packageManager": "pnpm@8.15.4",
   "resolutions": {
     "vite": "^5.1.4"
   },

packages/core/index.ts

@@ -37,5 +37,6 @@ export * from './useSessionStorageState'
 export * from './useMutationObserver'
 export * from './useResizeObserver'
 export * from './useTimeout'
+export * from './useClipboard'
 
 export * from '@rcuse/shared'

packages/core/useClipboard/__tests__/index.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest'
+import { useClipboard } from '../index'
+
+describe('useCopyToClipboard', () => {
+  it('should be defined ', () => {
+    expect(useClipboard).toBeDefined()
+  })
+})

packages/core/useClipboard/index.ts

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+
+export function useClipboard({ timeout = 2000 } = {}) {
+  const [error, setError] = useState<Error | null>(null)
+  const [copied, setCopied] = useState(false)
+  const [copyTimeout, setCopyTimeout] = useState<number | null>(null)
+
+  const handleCopyResult = (value: boolean) => {
+    window.clearTimeout(copyTimeout!)
+    setCopyTimeout(window.setTimeout(() => setCopied(false), timeout))
+    setCopied(value)
+  }
+
+  const copy = (text: string) => {
+    if ('clipboard' in navigator) {
+      navigator.clipboard
+        .writeText(text)
+        .then(() => handleCopyResult(true))
+        .catch(setError)
+    }
+    else {
+      setError(new Error('useClipboard: navigator.clipboard is not supported'))
+    }
+  }
+
+  const reset = () => {
+    setCopied(false)
+    setError(null)
+    window.clearTimeout(copyTimeout!)
+  }
+
+  return { copy, reset, error, copied }
+}

packages/core/useEffectOnce/index.ts

@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react'
+import type React from 'react'
+import { useEffect } from 'react'
 
-export const useEffectOnce = (effect: React.EffectCallback) => {
-  useEffect(effect, []);
+export function useEffectOnce(effect: React.EffectCallback) {
+  useEffect(effect, [])
 }