Skip to content

Conversation

AdaltonLeite
Copy link
Contributor

@AdaltonLeite AdaltonLeite commented Oct 17, 2022

Description

We are currently opening an alert to let you know that the code has been copied. My proposal is to improve the user experience by informing on the button itself that the code is already copied in its transfer area. If this change makes sense, we create this action for the others copy buttons.

BEFORE

ezgif-3-461f27a320

AFTER

ezgif com-gif-maker (1)

@vercel
Copy link

vercel bot commented Oct 17, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
react-hook-form-website ✅ Ready (Inspect) Visit Preview Oct 18, 2022 at 0:19AM (UTC)

@bluebill1049
Copy link
Member

that looks good, would you like to apply to all so it's consistent? perhaps a custom hook for the job.

@AdaltonLeite
Copy link
Contributor Author

Yeah. Make sense create for all. I'll change the PR.

@AdaltonLeite
Copy link
Contributor Author

@bluebill1049 I created a component ClipBoard, the function of this component is just render a text and change a label with COPY and COPIED

I change on this pages/components:

  • Get Started
    ezgif com-gif-maker (2)

  • Dev Tools
    ezgif com-gif-maker (3)

  • Builder page
    ezgif com-gif-maker (4)

  • CodeArea
    ezgif com-gif-maker (5)

I searched the whole project and couldn't find any more alerts modal with clipboard.

@AdaltonLeite
Copy link
Contributor Author

I fixed a small issue on BuilderPage.tsx the <CodeArea ... /> component don't send a prop withOutCopy and this generated two ClipButton, one for the page and another for <CodeArea .../> component.

Test case for this bug:
1 - Access the Form Builder page ( https://react-hook-form.com/form-builder)
2- Click on Clip button
3- You will look two copy buttons.
Captura de Tela 2022-10-17 às 21 30 05

@bluebill1049
Copy link
Member

thanks a lot for making this happend. 👍

@AdaltonLeite
Copy link
Contributor Author

Thanks you for this beautiful library!

Copy link
Member

@bluebill1049 bluebill1049 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, just one minor feedback.

className?: string
currentLanguage: string
}) => {
const [copiedCode, setCopiedCode] = useState<boolean>(false)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

worth adding a ref with setTimeout in case of a memory leak.

const timer = useRef()

React.useEffect(() => () => clearTime(timer.current))

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will address this tho, thanks for the awesome work!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done :) a336981

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent point! Thanks so much.

@bluebill1049 bluebill1049 merged commit 71bc809 into react-hook-form:master Oct 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants