useClipboard
Copy values to the system clipboard with optimistic status updates and optional reset timers.
Trigger clipboard writes and expose helpful status text while the hook handles fallbacks and resets.
Loading demo…
import { useState } from 'react';
import { Badge, Block, Button, Input, useClipboard } from '@plocks/ui';
const INVITE_URL = 'https://app.example.com/invite/engineering';
export function Demo() {
const { copy, copied, unsupported, lastValue } = useClipboard({ timeout: 1500 });
const [value, setValue] = useState(INVITE_URL);
return (
<Block align="flex-start" maw={460} fullWidth>
<Input
label="Invite URL"
value={value}
onChangeText={setValue}
error={unsupported ? 'Clipboard access is not available in this environment.' : undefined}
description="The copied state resets automatically after 1.5 seconds."
textInputProps={{ autoCapitalize: 'none' }}
/>
<Button onPress={() => copy(value)} disabled={unsupported}>
{copied ? 'Copied!' : 'Copy link'}
</Button>
{lastValue ? (
<Badge variant="subtle" c={copied ? 'success' : 'gray'}>
Last copied: {lastValue}
</Badge>
) : null}
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources