Created
October 24, 2020 22:27
-
-
Save ryanflorence/e467ceb93fdba6814ef788dcbc9f00aa to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function CopyButton({ value }) { | |
| let [copied, setCopied] = React.useState(); | |
| let hydrated = usePageIsHydrated(); | |
| React.useEffect(() => { | |
| let id = setTimeout(() => setCopied(false), 2000); | |
| return () => clearTimeout(id); | |
| }, [copied]); | |
| return ( | |
| <button | |
| disabled={!hydrated} | |
| onClick={() => { | |
| navigator.clipboard.writeText(value); | |
| setCopied(true); | |
| }} | |
| > | |
| <ClipboardSvgIcon /> | |
| {copied ? "Copied!" : "Copy"} | |
| </button> | |
| ); | |
| } |
I'm not really sure, but won't the
effectbe executed twice? One time triggered whencopiedis set to true, and another time whencopiedis set to false which will makecopiedto false again (but won't cause anothereffectsince the value didn't change)
I don't think it affects much, just a point there
Yes, I think you are right.
It just happens to be fine in this case.
Adding a if (copied) clause may be better.
Do you mind sharing usePageIsHydrated?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm not really sure, but won't the
effectbe executed twice? One time triggered whencopiedis set to true, and another time whencopiedis set to false which will makecopiedto false again (but won't cause anothereffectsince the value didn't change)I don't think it affects much, just a point there