ref: copytoclipboard with less magic #102190
Merged
+459
−386
Conversation
This file contains hidden or 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
github-actions
bot
added
the
Scope: Frontend
❌ 1 Tests Failed:
View the full list of 1 ❄️ flaky test(s)
To view more test analytics, go to the Test Analytics Dashboard |
JonasBa
commented
Oct 28, 2025
| children?: never; | ||
| onCopy?: undefined | ((copiedText: string) => void); | ||
| onError?: undefined | ((error: Error) => void); | ||
| } & Overwrite< |
There was a problem hiding this comment.
The type signature here was dropping the aria-label requirement from types.
scttcper
approved these changes
Oct 28, 2025
Yeah, we can just drop the hook and expose the copyToClipboard directly :D not like there's anything react related in there now anyways... |
TkDodo
approved these changes
Oct 29, 2025
| * @default {successMessage: t('Copied to clipboard'), errorMessage: t('Error copying to clipboard')} | ||
| * Pass `null` to disable any toast messages. | ||
| */ | ||
| options?: {errorMessage?: React.ReactNode; successMessage?: React.ReactNode} | null |
There was a problem hiding this comment.
really small thing but why would we need options: null if it’s already optional?
Suggested change
| options?: {errorMessage?: React.ReactNode; successMessage?: React.ReactNode} | null | |
| options?: {errorMessage?: React.ReactNode; successMessage?: React.ReactNode} |
There was a problem hiding this comment.
@TkDodo there used to be a hook prop called hideMessages which is now expressed as passing the null value. I find null to be more explicit in this case as we initialize default success and error messages. I'd be open to better alternatives though, I'm not a big fan of it either
Issues attributed to commits in this pull requestThis pull request was merged and Sentry observed the following issues: |
isabellaenriquez
pushed a commit
that referenced
this pull request
Oct 31, 2025
Refactor and reduce the abstraction of useCopyToClipboard to mostly manage navigator.clipboard calls. The improvements decouple the hook call functionality by deferring more responsibility to the caller (inversion of control). **Changes:** - Remove 1:1 coupling between Copy and react hook calls. (extra flexibility) Copy callback now receives the text arguments directly, meaning one instance of the copy callback can be called with multiple different values without doing `useCopyToClipboard` many times. - Explicit control flow (easier call tracing) The indirection of passing props to a hook that creates a closure and calls the callback creates an indirection where `copy()` requires you to see what arguments went into the call by investigating props. By changing this to `copy(...arguments)`, we make the calls explicit - Remove onCopy and onError in favor of returning the promise from the copy callback This is now explicit, which improves readability and understanding of when these callbacks are executed. - Remove label handling While this may have been helpful, it has also been largely unused, and in many cases resulted in our tooltips changing text to "Copied!", as well as the toast messages being dispatched. Having multiple indicators for a single action is not a good user experience. If this functionality is required, it can be implemented by hooking into the returned promise value. Given the simplification, I think it's actually sensible to argue that this probably does not need to be a react hook at all, and could simply just be function call that wraps around the navigator.clipboard API, but I'll leave that up to discussion and a future change
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Refactor and reduce the abstraction of useCopyToClipboard to mostly manage navigator.clipboard calls. The improvements decouple the hook call functionality by deferring more responsibility to the caller (inversion of control).
Changes:
Copy callback now receives the text arguments directly, meaning one instance of the copy callback can be called with multiple different values without doing
useCopyToClipboardmany times.The indirection of passing props to a hook that creates a closure and calls the callback creates an indirection where
copy()requires you to see what arguments went into the call by investigating props. By changing this tocopy(...arguments), we make the calls explicitThis is now explicit, which improves readability and understanding of when these callbacks are executed.
While this may have been helpful, it has also been largely unused, and in many cases resulted in our tooltips changing text to "Copied!", as well as the toast messages being dispatched. Having multiple indicators for a single action is not a good user experience. If this functionality is required, it can be implemented by hooking into the returned promise value.
Given the simplification, I think it's actually sensible to argue that this probably does not need to be a react hook at all, and could simply just be function call that wraps around the navigator.clipboard API, but I'll leave that up to discussion and a future change