Add successDuration option for success message.

This fixes #4.

Author: danoc

README.md

@@ -36,4 +36,23 @@ function App() {
 }
 ```
 
+You can reset the `isCopied` value after a certain amount of time with the `successDuration` option.
+
+```jsx
+import useClipboard from "react-use-clipboard";
+
+function App() {
+  const [isCopied, setCopied] = useClipboard("Text to copy", {
+    // `isCopied` will go back to `false` after 1000ms.
+    successDuration: 1000
+  });
+
+  return (
+    <button onClick={setCopied}>
+      Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}
+    </button>
+  );
+}
+```
+
 This package only works in versions of React that support Hooks.

src/index.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cleanup, fireEvent, render } from "@testing-library/react";
+import { cleanup, fireEvent, render, act } from "@testing-library/react";
 import useClipboard from "./";
 
 afterEach(cleanup);
@@ -24,3 +24,71 @@ test("display sucess message if the copy worked", () => {
 
   expect(button.textContent).toBe("Yes");
 });
+
+describe("successDuration", () => {
+  test("`isCopied` becomes false after `successDuration` time ellapses", () => {
+    jest.useFakeTimers();
+    const successDuration = 1000;
+
+    const Component = () => {
+      const [isCopied, setCopied] = useClipboard("Text to copy", {
+        successDuration
+      });
+
+      return (
+        <button onClick={setCopied} 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");
+
+    // Fast-forward half-way
+    jest.advanceTimersByTime(successDuration / 2);
+
+    expect(button.textContent).toBe("Yes");
+
+    act(() => {
+      // Go to the end
+      jest.advanceTimersByTime(successDuration / 2);
+    });
+
+    expect(button.textContent).toBe("Nope");
+  });
+
+  test("`isCopied` is always true if `successDuration` is not provided", () => {
+    jest.useFakeTimers();
+
+    const Component = () => {
+      const [isCopied, setCopied] = useClipboard("Text to copy", {});
+
+      return (
+        <button onClick={setCopied} 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");
+
+    // Fast-forward half-way
+    jest.runAllTimers();
+
+    expect(button.textContent).toBe("Yes");
+  });
+});

src/index.tsx

@@ -1,8 +1,32 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import copy from "copy-to-clipboard";
 
-export default function useCopyClipboard(text: string): [boolean, () => void] {
+interface IOptions {
+  /**
+   * Reset the status after a certain number of milliseconds. This is useful
+   * for showing a temporary success message.
+   */
+  successDuration?: number;
+}
+
+export default function useCopyClipboard(
+  text: string,
+  options?: IOptions
+): [boolean, () => void] {
   const [isCopied, setIsCopied] = useState(false);
+  const successDuration = options && options.successDuration;
+
+  useEffect(() => {
+    if (isCopied && successDuration) {
+      const id = setTimeout(() => {
+        setIsCopied(false);
+      }, successDuration);
+
+      return () => {
+        clearTimeout(id);
+      };
+    }
+  }, [isCopied, successDuration]);
 
   return [
     isCopied,