diff --git a/.changeset/rich-garlics-help.md b/.changeset/rich-garlics-help.md
new file mode 100644
index 0000000..aab50ad
--- /dev/null
+++ b/.changeset/rich-garlics-help.md
@@ -0,0 +1,5 @@
+---
+"react-use-clipboard": minor
+---
+
+Add an option to pass in the text that should be copied through `setCopied` rather than `useClipboard`.
diff --git a/README.md b/README.md
index 5508f15..2c60796 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ We encourage pinning the version number until `react-use-clipboard` reaches `1.0
## Usage
-Here's how to use `react-use-clipboard`:
+There are two ways to use `react-use-clipboard`. You can define provide the text to be copied upfront:
```jsx
import useClipboard from "react-use-clipboard";
@@ -36,6 +36,26 @@ function App() {
}
```
+Alternatively, you can provide the text when calling `setCopied`:
+
+```jsx
+import useClipboard from "react-use-clipboard";
+
+function App() {
+ const [isCopied, setCopied] = useClipboard();
+
+ return (
+
+ );
+}
+```
+
You can reset the `isCopied` value after a certain amount of time with the `successDuration` option.
```jsx
diff --git a/example/pages/index.js b/example/pages/index.js
index 44c7822..3404973 100644
--- a/example/pages/index.js
+++ b/example/pages/index.js
@@ -1,14 +1,50 @@
import useClipboard from "react-use-clipboard";
-export default function App() {
+/**
+ * Provides the text to copy to `useClipboard`.
+ */
+const ExampleA = () => {
const [isCopied, setCopied] = useClipboard("Text to copy", {
// `isCopied` will go back to `false` after 1000ms.
successDuration: 1000,
});
+ ;
+};
+
+/**
+ * Provides the text to copy to `setCopied`.
+ */
+const ExampleB = () => {
+ const [isCopied, setCopied] = useClipboard({
+ // `isCopied` will go back to `false` after 1000ms.
+ successDuration: 1000,
+ });
+
+ ;
+};
+
+export default function App() {
return (
-
+