Add option for passing in text to copy in setCopied rather than useClipboard

.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`.

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 (
+    <button
+      onClick={() => {
+        setCopied("Text to copy");
+      }}
+    >
+      Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}
+    </button>
+  );
+}
+```
+
 You can reset the `isCopied` value after a certain amount of time with the `successDuration` option.
 
 ```jsx

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,
   });
 
+  <button onClick={setCopied}>
+    Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}
+  </button>;
+};
+
+/**
+ * Provides the text to copy to `setCopied`.
+ */
+const ExampleB = () => {
+  const [isCopied, setCopied] = useClipboard({
+    // `isCopied` will go back to `false` after 1000ms.
+    successDuration: 1000,
+  });
+
+  <button onClick={() => setCopied("Text to copy")}>
+    Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}
+  </button>;
+};
+
+export default function App() {
   return (
-    <button onClick={setCopied}>
-      Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}
-    </button>
+    <div>
+      <h1>
+        <code>react-use-clipboard</code>
+      </h1>
+      <h2>
+        Passing text into <code>useClipboard</code>
+      </h2>
+
+      <ExampleA />
+
+      <h2>
+        Passing text into <code>setCopied</code>
+      </h2>
+
+      <ExampleB />
+    </div>
   );
 }

src/index.test.tsx

@@ -25,6 +25,62 @@ test("display sucess message if the copy worked", () => {
   expect(button.textContent).toBe("Yes");
 });
 
+describe("text passed in as argument to `setCopied`", () => {
+  test("can copy text without options", () => {
+    const Component = () => {
+      const [isCopied, setCopied] = useClipboard();
+
+      return (
+        <button
+          onClick={() => {
+            setCopied("Text to copy");
+          }}
+          data-testid="btn-example"
+        >
+          {isCopied ? "Yes" : "Nope"}
+        </button>
+      );
+    };
+
+    const { getByTestId } = render(<Component />);
+    const button = getByTestId("btn-example");
+
+    expect(button.textContent).toBe("Nope");
+
+    fireEvent.click(button);
+
+    expect(button.textContent).toBe("Yes");
+  });
+
+  test("can copy text with options", () => {
+    const Component = () => {
+      const [isCopied, setCopied] = useClipboard({
+        successDuration: 1000,
+      });
+
+      return (
+        <button
+          onClick={() => {
+            setCopied("Text to copy");
+          }}
+          data-testid="btn-example"
+        >
+          {isCopied ? "Yes" : "Nope"}
+        </button>
+      );
+    };
+
+    const { getByTestId } = render(<Component />);
+    const button = getByTestId("btn-example");
+
+    expect(button.textContent).toBe("Nope");
+
+    fireEvent.click(button);
+
+    expect(button.textContent).toBe("Yes");
+  });
+});
+
 describe("successDuration", () => {
   test("`isCopied` becomes false after `successDuration` time ellapses", () => {
     jest.useFakeTimers();

src/index.tsx

@@ -12,7 +12,16 @@ interface IOptions {
 export default function useCopyClipboard(
   text: string,
   options?: IOptions
-): [boolean, () => void] {
+): [boolean, () => void];
+
+export default function useCopyClipboard(
+  options?: IOptions
+): [boolean, (text: string) => void];
+
+export default function useCopyClipboard(...args: any): any {
+  const defaultText = typeof args[0] === "string" ? args[0] : undefined;
+  const options = defaultText ? args[1] : args[0];
+
   const [isCopied, setIsCopied] = useState(false);
   const successDuration = options && options.successDuration;
 
@@ -30,8 +39,14 @@ export default function useCopyClipboard(
 
   return [
     isCopied,
-    () => {
-      const didCopy = copy(text);
+    (text?: string) => {
+      const textToCopy = text || defaultText;
+
+      if (!textToCopy) {
+        throw Error("Didn't provide text for `react-use-clipbaord` to copy.");
+      }
+
+      const didCopy = copy(textToCopy);
       setIsCopied(didCopy);
     },
   ];

tslint.json

@@ -11,6 +11,7 @@
   },
   "jsRules": {},
   "rules": {
+    "jsx-no-lambda": false,
     "ordered-imports": false,
     "react-hooks-nesting": "error"
   },