From 9bfc3346ab4c8c1b4ab42de8f779bd9b62845b40 Mon Sep 17 00:00:00 2001 From: SangNguyen Date: Fri, 9 Apr 2021 22:44:12 +0700 Subject: [PATCH 1/9] Add params for copying --- README.md | 4 ++-- example/pages/index.js | 4 ++-- src/index.tsx | 5 ++--- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5508f15..294d453 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ function App() { const [isCopied, setCopied] = useClipboard("Text to copy"); return ( - ); @@ -48,7 +48,7 @@ function App() { }); return ( - ); diff --git a/example/pages/index.js b/example/pages/index.js index 44c7822..12cdedd 100644 --- a/example/pages/index.js +++ b/example/pages/index.js @@ -1,13 +1,13 @@ import useClipboard from "react-use-clipboard"; export default function App() { - const [isCopied, setCopied] = useClipboard("Text to copy", { + const [isCopied, setCopied] = useClipboard({ // `isCopied` will go back to `false` after 1000ms. successDuration: 1000, }); return ( - ); diff --git a/src/index.tsx b/src/index.tsx index 48ae377..dfa0f91 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,9 +10,8 @@ interface IOptions { } export default function useCopyClipboard( - text: string, options?: IOptions -): [boolean, () => void] { +): [boolean, (text: string) => void] { const [isCopied, setIsCopied] = useState(false); const successDuration = options && options.successDuration; @@ -30,7 +29,7 @@ export default function useCopyClipboard( return [ isCopied, - () => { + (text: string) => { const didCopy = copy(text); setIsCopied(didCopy); }, From 9a49c6daa1fbe00580fbd4311dc6c91758458efe Mon Sep 17 00:00:00 2001 From: SangNguyen Date: Fri, 9 Apr 2021 22:49:36 +0700 Subject: [PATCH 2/9] Update test --- src/index.test.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/index.test.tsx b/src/index.test.tsx index 1ce8b45..364b016 100644 --- a/src/index.test.tsx +++ b/src/index.test.tsx @@ -6,10 +6,10 @@ afterEach(cleanup); test("display sucess message if the copy worked", () => { const Component = () => { - const [isCopied, setCopied] = useClipboard("Text to copy"); + const [isCopied, setCopied] = useClipboard(); return ( - ); @@ -31,12 +31,12 @@ describe("successDuration", () => { const successDuration = 1000; const Component = () => { - const [isCopied, setCopied] = useClipboard("Text to copy", { + const [isCopied, setCopied] = useClipboard({ successDuration, }); return ( - ); @@ -68,10 +68,10 @@ describe("successDuration", () => { jest.useFakeTimers(); const Component = () => { - const [isCopied, setCopied] = useClipboard("Text to copy", {}); + const [isCopied, setCopied] = useClipboard({}); return ( - ); From 39b07efd9d7deec74caa91103ea3f08b542a0852 Mon Sep 17 00:00:00 2001 From: SangNguyen Date: Fri, 9 Apr 2021 23:14:44 +0700 Subject: [PATCH 3/9] Update read me --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 294d453..6894a37 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ Here's how to use `react-use-clipboard`: import useClipboard from "react-use-clipboard"; function App() { - const [isCopied, setCopied] = useClipboard("Text to copy"); + const [isCopied, setCopied] = useClipboard(); return ( + ); +} +``` + +Alternatively, you can provide the text when calling `setCopied`: ```jsx import useClipboard from "react-use-clipboard"; @@ -29,7 +45,7 @@ function App() { const [isCopied, setCopied] = useClipboard(); return ( - ); @@ -42,13 +58,13 @@ You can reset the `isCopied` value after a certain amount of time with the `succ import useClipboard from "react-use-clipboard"; function App() { - const [isCopied, setCopied] = useClipboard({ + const [isCopied, setCopied] = useClipboard("Text to copy", { // `isCopied` will go back to `false` after 1000ms. successDuration: 1000, }); return ( - ); diff --git a/src/index.test.tsx b/src/index.test.tsx index 364b016..ce9f8b4 100644 --- a/src/index.test.tsx +++ b/src/index.test.tsx @@ -6,10 +6,10 @@ afterEach(cleanup); test("display sucess message if the copy worked", () => { const Component = () => { - const [isCopied, setCopied] = useClipboard(); + const [isCopied, setCopied] = useClipboard("Text to copy"); return ( - ); @@ -25,18 +25,64 @@ test("display sucess message if the copy worked", () => { expect(button.textContent).toBe("Yes"); }); +describe("text passed in as argument to `setCopied`", () => { + it("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"); + }) + + it("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(); const successDuration = 1000; const Component = () => { - const [isCopied, setCopied] = useClipboard({ + const [isCopied, setCopied] = useClipboard("Text to copy", { successDuration, }); return ( - ); @@ -68,10 +114,10 @@ describe("successDuration", () => { jest.useFakeTimers(); const Component = () => { - const [isCopied, setCopied] = useClipboard({}); + const [isCopied, setCopied] = useClipboard("Text to copy", {}); return ( - ); @@ -91,4 +137,4 @@ describe("successDuration", () => { expect(button.textContent).toBe("Yes"); }); -}); +}); \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index dfa0f91..6c6aef3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,9 +9,14 @@ interface IOptions { successDuration?: number; } -export default function useCopyClipboard( - options?: IOptions -): [boolean, (text: string) => void] { +export default function useCopyClipboard(text:string, options?:IOptions): [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] : null; + const options = defaultText ? args[1] : args[0]; + const [isCopied, setIsCopied] = useState(false); const successDuration = options && options.successDuration; @@ -34,4 +39,4 @@ export default function useCopyClipboard( setIsCopied(didCopy); }, ]; -} +} \ No newline at end of file From a7e3921c227963b1cd84b7c8c6983d83d99b708b Mon Sep 17 00:00:00 2001 From: Daniel O'Connor Date: Thu, 8 Jul 2021 16:26:29 -0400 Subject: [PATCH 6/9] Improvements --- README.md | 6 +++++- example/pages/index.js | 44 ++++++++++++++++++++++++++++++++++++++---- src/index.test.tsx | 22 +++++++++++++++------ src/index.tsx | 13 +++++++++---- 4 files changed, 70 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 976d387..2c60796 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,11 @@ function App() { const [isCopied, setCopied] = useClipboard(); return ( - ); diff --git a/example/pages/index.js b/example/pages/index.js index 12cdedd..f489b97 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 ce9f8b4..80d01ed 100644 --- a/src/index.test.tsx +++ b/src/index.test.tsx @@ -31,7 +31,12 @@ describe("text passed in as argument to `setCopied`", () => { const [isCopied, setCopied] = useClipboard(); return ( - ); @@ -45,16 +50,21 @@ describe("text passed in as argument to `setCopied`", () => { fireEvent.click(button); expect(button.textContent).toBe("Yes"); - }) + }); it("can copy text with options", () => { const Component = () => { const [isCopied, setCopied] = useClipboard({ - successDuration: 1000 + successDuration: 1000, }); return ( - ); @@ -68,7 +78,7 @@ describe("text passed in as argument to `setCopied`", () => { fireEvent.click(button); expect(button.textContent).toBe("Yes"); - }) + }); }); describe("successDuration", () => { @@ -137,4 +147,4 @@ describe("successDuration", () => { expect(button.textContent).toBe("Yes"); }); -}); \ No newline at end of file +}); diff --git a/src/index.tsx b/src/index.tsx index 6c6aef3..9b4d58e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,12 +9,17 @@ interface IOptions { successDuration?: number; } -export default function useCopyClipboard(text:string, options?:IOptions): [boolean, () => void]; +export default function useCopyClipboard( + text: string, + options?: IOptions +): [boolean, () => void]; -export default function useCopyClipboard(options?:IOptions): [boolean, (text: string) => 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] : null; + const defaultText = typeof args[0] === "string" ? args[0] : null; const options = defaultText ? args[1] : args[0]; const [isCopied, setIsCopied] = useState(false); @@ -39,4 +44,4 @@ export default function useCopyClipboard(...args: any): any { setIsCopied(didCopy); }, ]; -} \ No newline at end of file +} From 32ceed7594c2366510072d017fa3c40b75789f59 Mon Sep 17 00:00:00 2001 From: Daniel O'Connor Date: Thu, 8 Jul 2021 16:39:22 -0400 Subject: [PATCH 7/9] Some more tweaks. --- example/pages/index.js | 2 +- src/index.test.tsx | 4 ++-- src/index.tsx | 12 +++++++++--- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/example/pages/index.js b/example/pages/index.js index f489b97..3404973 100644 --- a/example/pages/index.js +++ b/example/pages/index.js @@ -17,7 +17,7 @@ const ExampleA = () => { /** * Provides the text to copy to `setCopied`. */ - const ExampleB = () => { +const ExampleB = () => { const [isCopied, setCopied] = useClipboard({ // `isCopied` will go back to `false` after 1000ms. successDuration: 1000, diff --git a/src/index.test.tsx b/src/index.test.tsx index 80d01ed..8d8b3ff 100644 --- a/src/index.test.tsx +++ b/src/index.test.tsx @@ -26,7 +26,7 @@ test("display sucess message if the copy worked", () => { }); describe("text passed in as argument to `setCopied`", () => { - it("can copy text without options", () => { + test("can copy text without options", () => { const Component = () => { const [isCopied, setCopied] = useClipboard(); @@ -52,7 +52,7 @@ describe("text passed in as argument to `setCopied`", () => { expect(button.textContent).toBe("Yes"); }); - it("can copy text with options", () => { + test("can copy text with options", () => { const Component = () => { const [isCopied, setCopied] = useClipboard({ successDuration: 1000, diff --git a/src/index.tsx b/src/index.tsx index 9b4d58e..d8c0b9a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,7 +19,7 @@ export default function useCopyClipboard( ): [boolean, (text: string) => void]; export default function useCopyClipboard(...args: any): any { - const defaultText = typeof args[0] === "string" ? args[0] : null; + const defaultText = typeof args[0] === "string" ? args[0] : undefined; const options = defaultText ? args[1] : args[0]; const [isCopied, setIsCopied] = useState(false); @@ -39,8 +39,14 @@ export default function useCopyClipboard(...args: any): any { return [ isCopied, - (text: string) => { - const didCopy = copy(text); + (text?: string) => { + const textToCopy = text || defaultText; + + if (!textToCopy) { + throw Error("Did not provide text to copy to the clipboard."); + } + + const didCopy = copy(textToCopy); setIsCopied(didCopy); }, ]; From 2b4d5af7f2ac82aa734e0c35a5c8240c30121f3b Mon Sep 17 00:00:00 2001 From: Daniel O'Connor Date: Thu, 8 Jul 2021 16:46:42 -0400 Subject: [PATCH 8/9] Fix lint --- src/index.tsx | 2 +- tslint.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index d8c0b9a..2e87daa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -43,7 +43,7 @@ export default function useCopyClipboard(...args: any): any { const textToCopy = text || defaultText; if (!textToCopy) { - throw Error("Did not provide text to copy to the clipboard."); + throw Error("Didn't provide text for `react-use-clipbaord` to copy."); } const didCopy = copy(textToCopy); 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" }, From d7c38a728a5bc9c0a2b8b23e3f4b19ae572ce2cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20O=E2=80=99Connor?= Date: Thu, 8 Jul 2021 16:51:42 -0400 Subject: [PATCH 9/9] Update rich-garlics-help.md --- .changeset/rich-garlics-help.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/rich-garlics-help.md b/.changeset/rich-garlics-help.md index b3541c3..aab50ad 100644 --- a/.changeset/rich-garlics-help.md +++ b/.changeset/rich-garlics-help.md @@ -1,5 +1,5 @@ --- -"react-use-clipboard": patch +"react-use-clipboard": minor --- -Add params for copying func +Add an option to pass in the text that should be copied through `setCopied` rather than `useClipboard`.