Take a look at this function:
function useCustomElement<T extends HTMLElement>(ref?: React.RefObject<T>) {
const elementRef = ref ? ref : useRef(null)
const [value, setValue] = useState(false)
// perform some operations...
return ref ? [value] : [elementRef, value]
}
You can utilize this function in two different ways:
const [ref, value] = useCustomElement<HTMLDivElement>()
or
const ref = useRef(null)
const [value] = useCustomElement<HTMLDivElement>(ref)
// TYPE ERROR
<div className="" ref={ref}></div>
The issue I encountered is:
Type 'boolean | MutableRefObject<any>' is not compatible with type 'LegacyRef<HTMLDivElement>'.
Type 'false' does not match the type 'LegacyRef<HTMLDivElement>'
How do I properly type the function to ensure the return type is always accurate?