usePaste

The usePaste hook listens for paste events (Ctrl+V / Cmd+V) on the canvas.

Import

import { usePaste } from "@gridland/web"

Usage

Basic

function Editor() {
  const [text, setText] = useState("")

  usePaste((pasted) => {
    setText((prev) => prev + pasted)
  })

  return <text>{text}</text>
}

Examples

Append to Input

Append pasted text

function Editor() {
  const [text, setText] = useState("")

  usePaste((pasted) => {
    setText((prev) => prev + pasted)
  })

  return <text>{text}</text>
}

Paste Validation

Filter or transform pasted content before using it.

Validate paste

function UrlInput() {
  const [url, setUrl] = useState("")
  const [error, setError] = useState("")

  usePaste((pasted) => {
    const trimmed = pasted.trim()
    if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
      setUrl(trimmed)
      setError("")
    } else {
      setError("Only URLs are accepted")
    }
  })

  return (
    <box>
      <text>{url || "Paste a URL..."}</text>
      {error && <text color="red">{error}</text>}
    </box>
  )
}

Parameters

Param	Type	Description
`callback`	`(text: string) => void`	Called with the pasted text

Usage

Examples

Append to Input

Paste Validation

Parameters

On this page