A React app with moving input focus after character limit
Design comparison
Solution retrospective
I initially wrote this in normal HTML/CSS/JS but decided to switch over to React. I'm still learning it and decided to try out React hook form for this challenge.
I really like how the app came out. Some of the features include:
- move focus to next input when char limit reached
- [update] single digits convert to two digits when leaving input (blur event)
- using setInterval and promises to get the count up effect.
- responsive mobile first design
I welcome any feedback and pointers to good React practices. Major challenge I faced was letting go of the responsibility of updating the DOM and let React handle it.
ie. I'm using document.getElementById to move the focus to the next input when the character limit is reached but doesn't feel very React like. Is there another way?
Community feedback
- @NizarMjrPosted over 1 year ago
@Arturo I like what you have done it's nice work Getting element from DOM with its ID is useful to focus on input however there is useRef hook could make same work ex : const inputRef = useRef(null) <input ref={inputRef} /> function () { //your js logic inputRef.current.focus()}
0@artimysPosted over 1 year ago@NizarMjr Thanks for the feedback,
I was having some issues with useRef hook but I'm thinking it was related to ReactHookForms and then I found how to share the ref but trouble getting that as well.
Funny, found the solution in ReactHookForm's docs useFocus(). Did the trick.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord