useFocusWithin

About

Handles focus events for the target component.

Examples

import { useState } from "react";
import { useFocusWithin } from "rooks";
const Page = () => {
const [isFocusWithin, setIsFocusWithin] = useState<boolean>(false);
const { focusWithinProps } = useFocusWithin<HTMLDivElement>({
onFocusWithin: () => {
console.log("focus within");
},
onBlurWithin: () => {
console.log("blur within");
},
onFocusWithinChange: (isFocusWithin) => {
setIsFocusWithin(isFocusWithin);
},
});
return (
<div
{...focusWithinProps}
style={{
display: "inline-block",
border: "1px solid gray",
padding: 10,
margin: "auto",
background: isFocusWithin ? "goldenrod" : "gray",
color: isFocusWithin ? "black" : "white",
}}
>
<label style={{ display: "block" }}>
First Name: <input />
</label>
<label style={{ display: "block" }}>
Last Name: <input />
</label>
</div>
);
};
export default Page;

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

Powered by vercel