The task is to create a useFocus() hook that allows conditional rendering in parent element to focus on the state of descendant elements.
The boilerplate code is:
import React, { Ref } from 'react'
export function useFocus<T extends HTMLElement>(): [Ref<T>, boolean] {
// your code here
}
// if you want to try your code on the right panel
// remember to export App() component like below
// export function App() {
// const [ref, isFocused] = useFocus()
// return <div>
// <input ref={ref}/>
// {isFocused && <p>focused</p>}
// </div>
// }
The first step is to create a ref for the input, and also a state variable for focusing on the input
const ref = useRef<T>
const[isFocused, setIsFocused] = useState(false)
The state is a boolean because the input is either focused or not. The next step is to get the node. If there is no node, return null.
const node = ref.current
if(!node) return
Next, a function that sets isFocused to true when the focus moves into the container or any descendant
const handleFocusIn = () => setIsFocused(true)
Then, a function that sets isFocused to false when the focus is outside the container or any descendant. It receives the FocusEvent and uses event.relatedTarget to see where focus is moved to.
const handleFocusOut = (e: FocusEvent) => {
if(node && !node.contains(e.relatedTarget as Node)) {
setIsFocused(false)
}
}
Event listeners for focusin and focusout should be added to the node.
node.addEventListener("focusin", handleFocusIn)
node.addEventListener("focusout", handleFocusOut)
A function to clean up previous event listeners when the app renders again
return () => {
node.removeEventListeners("focusin", handleFocusIn)
node.removeEventListeners("focusout", handleFocusOut)
}
The final code with an example looks like this:
import React, { useRef, useEffect, useState, Ref } from 'react'
export function useFocus<T extends HTMLElement>(): [Ref<T>, boolean] {
// your code here
const ref = useRef<T>(null);
const[isFocused, setIsFocused] = useState(false);
useEffect(() => {
const node = ref.current
if(!node) return
const handleFocusIn = () => setIsFocused(true);
const handleFocusOut = (e: FocusEvent) => {
if(node && !node.contains(e.relatedTarget as Node)) {
setIsFocused(false)
}
}
node.addEventListener("focusin", handleFocusIn)
node.addEventListener("focusout", handleFocusOut)
return () => {
node.removeEventListener("focusin", handleFocusIn)
node.removeEventListener("focusout", handleFocusOut)
}
})
return [ref, isFocused]
}
// if you want to try your code on the right panel
// remember to export App() component like below
export function App() {
const [ref, isFocused] = useFocus<HTMLDivElement>()
return <div ref={ref}>
<input placeholder="First Input"/>
<input placeholder="Second Input" />
{isFocused && <p>focused</p>}
</div>
}
That's all folks!
SOCIAL SHARE CARD GENERATOR