ref
Attach the returned ref to the element you want to manage.
Hook
useFocus
The useFocus hook simplifies focus management by providing an easy way to focus elements programmatically. It helps build accessible forms, dialogs, and interactive components.
Import
import { useFocus } from "@shivms/ui";API
The hook returns a ref and helper methods for managing focus on an element.
focus
Programmatically focus the attached element.
Accessibility
Improves keyboard navigation and user experience.
Basic Usage
Attach the returned ref to an element and call the focus function whenever you need to move keyboard focus.
import {
Button,
useFocus,
} from "@shivms/ui";
export default function App() {
const {
ref,
focus,
} = useFocus();
return (
<>
<input ref={ref} />
<Button
onClick={focus}
>
Focus Input
</Button>
</>
);
}Features
01
Focus Elements
Programmatically move focus to any supported element with a single function call.
02
Better Accessibility
Improve keyboard navigation and accessibility for forms, dialogs, and menus.
03
Easy Integration
Works seamlessly with React refs and reusable components throughout your application.
Continue Reading
Explore more SHIVMS UI documentation and guides.
Learn what SHIVMS UI is and how to begin.
Install the library into your project.
Reusable React hooks for state, themes and responsiveness.
Use built-in icons throughout your application.
Configure light and dark themes.
Reusable helper functions for everyday development.
Build accessible user interfaces.
Customize colors, spacing and components.
See what's new in each release.