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 ( - +
+

+ react-use-clipboard +

+

+ Passing text into useClipboard +

+ + + +

+ Passing text into setCopied +

+ + +
); } diff --git a/src/index.test.tsx b/src/index.test.tsx index 1ce8b45..8d8b3ff 100644 --- a/src/index.test.tsx +++ b/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 ( + + ); + }; + + const { getByTestId } = render(); + 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 ( + + ); + }; + + const { getByTestId } = render(); + 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(); diff --git a/src/index.tsx b/src/index.tsx index 48ae377..2e87daa 100644 --- a/src/index.tsx +++ b/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); }, ]; diff --git a/tslint.json b/tslint.json index 187586d..b2f072f 100644 --- a/tslint.json +++ b/tslint.json @@ -11,6 +11,7 @@ }, "jsRules": {}, "rules": { + "jsx-no-lambda": false, "ordered-imports": false, "react-hooks-nesting": "error" },