useFocus

browser

test coverage

Last changed: 24 days ago

Hook that allows you to focus on a specific element

import { useFocus } from '@siberiacancode/reactuse';

Usage

const { focus, blur, focused } = useFocus(ref);
// or
const { ref, focus, blur, focused } = useFocus();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to focus
options.initialValue?	boolean	false	The initial focus state of the target
options.onFocus?	(event: FocusEvent) => void	-	The callback function to be invoked on focus
options.onBlur?	(event: FocusEvent) => void	-	The callback function to be invoked on blur

Returns

UseFocusReturn

Parameters

Name	Type	Default	Note
options.initialValue?	boolean	false	The initial focus state of the target
options.onFocus?	(event: FocusEvent) => void	-	The callback function to be invoked on focus
options.onBlur?	(event: FocusEvent) => void	-	The callback function to be invoked on blur

Returns

UseFocusReturn & { ref: StateRef<Target> }

Source

Source • Demo

Contributors

debabin