useFocus

A component that uses the useFocus hook becomes "focusable" to Ink, so when the user presses <kbd>Tab</kbd>, Ink will switch focus to this component. If there are multiple components that execute the useFocus hook, focus will be given to them in the order in which these components are rendered. This hook returns an object with an isFocused boolean property, which determines whether this component is focused.

Usage

import {render, useFocus, Text} from 'ink';

const Example = () => {
	const {isFocused} = useFocus();

	return <Text>{isFocused ? 'I am focused' : 'I am not focused'}</Text>;
};

render(<Example />);

See example in examples/use-focus and examples/use-focus-with-id.

API

useFocus(options?)

options

autoFocus

Type: boolean
Default: false

Auto-focus this component if there's no active (focused) component right now.

isActive

Type: boolean
Default: true

Enable or disable this component's focus, while still maintaining its position in the list of focusable components. This is useful for inputs that are temporarily disabled.

id

Type: string
Required: false

Set a component's focus ID, which can be used to programmatically focus the component. This is useful for large interfaces with many focusable elements to avoid having to cycle through all of them.