Skip to content

Commit 7182227

Browse files
segunadebayosegunadebayo
committed
docs: clipboard
1 parent 0770ee4 commit 7182227

File tree

9 files changed

+101
-2
lines changed

9 files changed

+101
-2
lines changed

‎packages/react/src/components/clipboard/clipboard.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ export default meta
99
export { Basic } from './examples/basic'
1010
export { Context } from './examples/context'
1111
export { Controlled } from './examples/controlled'
12+
export { CustomTimeout } from './examples/custom-timeout'
1213
export { RootProvider } from './examples/root-provider'

‎packages/react/src/components/clipboard/examples/custom-timeout.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Clipboard } from '@ark-ui/react/clipboard'
2+
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
3+
4+
export const CustomTimeout = () => {
5+
return (
6+
<Clipboard.Root value="https://ark-ui.com" timeout={5000}>
7+
<Clipboard.Label>Copy this link (5 second timeout)</Clipboard.Label>
8+
<Clipboard.Control>
9+
<Clipboard.Input />
10+
<Clipboard.Trigger>
11+
<Clipboard.Indicator copied={<CheckIcon />}>
12+
<ClipboardCopyIcon />
13+
</Clipboard.Indicator>
14+
</Clipboard.Trigger>
15+
</Clipboard.Control>
16+
</Clipboard.Root>
17+
)
18+
}

‎packages/solid/src/components/clipboard/clipboard.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ export default meta
99
export { Basic } from './examples/basic'
1010
export { Context } from './examples/context'
1111
export { Controlled } from './examples/controlled'
12+
export { CustomTimeout } from './examples/custom-timeout'
1213
export { RootProvider } from './examples/root-provider'

‎packages/solid/src/components/clipboard/examples/custom-timeout.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Clipboard } from '@ark-ui/solid/clipboard'
2+
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
3+
import { Show } from 'solid-js'
4+
5+
export const CustomTimeout = () => {
6+
return (
7+
<Clipboard.Root value="https://ark-ui.com" timeout={5000}>
8+
<Clipboard.Label>Copy this link (5 second timeout)</Clipboard.Label>
9+
<Clipboard.Control>
10+
<Clipboard.Input />
11+
<Clipboard.Trigger>
12+
<Clipboard.Indicator>
13+
<Show when={false} fallback={<ClipboardCopyIcon />}>
14+
<CheckIcon />
15+
</Show>
16+
</Clipboard.Indicator>
17+
</Clipboard.Trigger>
18+
</Clipboard.Control>
19+
</Clipboard.Root>
20+
)
21+
}

‎packages/svelte/src/lib/components/clipboard/clipboard.stories.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/svelte'
22
import BasicExample from './examples/basic.svelte'
33
import ContextExample from './examples/context.svelte'
44
import ControlledExample from './examples/controlled.svelte'
5+
import CustomTimeoutExample from './examples/custom-timeout.svelte'
56
import RootProviderExample from './examples/root-provider.svelte'
67

78
const meta: Meta = {
@@ -28,6 +29,12 @@ export const Controlled = {
2829
}),
2930
}
3031

32+
export const CustomTimeout = {
33+
render: () => ({
34+
Component: CustomTimeoutExample,
35+
}),
36+
}
37+
3138
export const RootProvider = {
3239
render: () => ({
3340
Component: RootProviderExample,

‎packages/svelte/src/lib/components/clipboard/examples/custom-timeout.svelte

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
3+
import { Clipboard } from '@ark-ui/svelte/clipboard'
4+
</script>
5+
6+
<Clipboard.Root value="https://ark-ui.com" timeout={5000}>
7+
<Clipboard.Label>Copy this link (5 second timeout)</Clipboard.Label>
8+
<Clipboard.Control>
9+
<Clipboard.Input />
10+
<Clipboard.Trigger>
11+
<Clipboard.Indicator>
12+
<ClipboardCopyIcon />
13+
{#snippet copied()}
14+
<CheckIcon />
15+
{/snippet}
16+
</Clipboard.Indicator>
17+
</Clipboard.Trigger>
18+
</Clipboard.Control>
19+
</Clipboard.Root>

‎packages/vue/src/components/clipboard/clipboard.stories.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import Basic from './examples/basic.vue'
33
import Context from './examples/context.vue'
44
import Controlled from './examples/controlled.vue'
5+
import CustomTimeout from './examples/custom-timeout.vue'
56
import RootProvider from './examples/root-provider.vue'
67
</script>
78
<template>
@@ -15,6 +16,9 @@ import RootProvider from './examples/root-provider.vue'
1516
<Variant title="Controlled">
1617
<Controlled />
1718
</Variant>
19+
<Variant title="CustomTimeout">
20+
<CustomTimeout />
21+
</Variant>
1822
<Variant title="RootProvider">
1923
<RootProvider />
2024
</Variant>

‎packages/vue/src/components/clipboard/examples/custom-timeout.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import { Clipboard } from '@ark-ui/vue/clipboard'
3+
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
4+
</script>
5+
6+
<template>
7+
<Clipboard.Root default-value="https://ark-ui.com" :timeout="5000">
8+
<Clipboard.Label>Copy this link (5 second timeout)</Clipboard.Label>
9+
<Clipboard.Control>
10+
<Clipboard.Input />
11+
<Clipboard.Trigger>
12+
<Clipboard.Indicator>
13+
<ClipboardCopyIcon />
14+
<template #copied>
15+
<CheckIcon />
16+
</template>
17+
</Clipboard.Indicator>
18+
</Clipboard.Trigger>
19+
</Clipboard.Control>
20+
</Clipboard.Root>
21+
</template>

‎website/src/content/pages/components/clipboard.mdx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ Learn how to use the `Clipboard` component in your project. Let's take a look at
2222

2323
### Using Context
2424

25-
Access the clipboard state and methods using `Clipboard.Context`. This provides access to properties like `copied`, `value`, `setValue`, and `copyCalled`.
25+
Access the clipboard state and methods using `Clipboard.Context`. This provides access to properties like `copied`,
26+
`value`, and `setValue`
2627

2728
<Example id="context" />
2829

@@ -37,9 +38,15 @@ Control the clipboard value externally by managing the state yourself and using
3738
Use the `useClipboard` hook to create the clipboard store and pass it to the `Clipboard.RootProvider` component. This
3839
allows you to have maximum control over the clipboard programmatically.
3940

41+
> If you're using the `Clipboard.RootProvider` component, you don't need to use the `Clipboard.Root` component.
42+
4043
<Example id="root-provider" />
4144

42-
> If you're using the `Clipboard.RootProvider` component, you don't need to use the `Clipboard.Root` component.
45+
### Custom Timeout
46+
47+
Configure the copy status timeout duration using the `timeout` prop. Default is 3000ms (3 seconds).
48+
49+
<Example id="custom-timeout" />
4350

4451
## API Reference
4552

0 commit comments

Comments
 (0)