useFocusManager

This hook exposes methods to enable or disable focus management for all components or manually switch focus to next or previous components.

API

enableFocus()

Enable focus management for all components.

Note: You don't need to call this method manually unless you've disabled focus management. Focus management is enabled by default.

import {useFocusManager} from 'ink';

const Example = () => {
	const {enableFocus} = useFocusManager();

	useEffect(() => {
		enableFocus();
	}, []);

	return …
};

disableFocus()

Disable focus management for all components. The currently active component (if there's one) will lose its focus.

import {useFocusManager} from 'ink';

const Example = () => {
	const {disableFocus} = useFocusManager();

	useEffect(() => {
		disableFocus();
	}, []);

	return …
};

focusNext()

Switch focus to the next focusable component. If there's no active component right now, focus will be given to the first focusable component. If the active component is the last in the list of focusable components, focus will be switched to the first focusable component.

Note: Ink calls this method when user presses <kbd>Tab</kbd>.

import {useFocusManager} from 'ink';

const Example = () => {
	const {focusNext} = useFocusManager();

	useEffect(() => {
		focusNext();
	}, []);

	return …
};

focusPrevious()

Switch focus to the previous focusable component. If there's no active component right now, focus will be given to the first focusable component. If the active component is the first in the list of focusable components, focus will be switched to the last focusable component.

Note: Ink calls this method when user presses <kbd>Shift</kbd>+<kbd>Tab</kbd>.

import {useFocusManager} from 'ink';

const Example = () => {
	const {focusPrevious} = useFocusManager();

	useEffect(() => {
		focusPrevious();
	}, []);

	return …
};

focus(id)

id

Type: string

Switch focus to the component with the given id. If there's no component with that ID, focus will be given to the next focusable component.

import {useFocusManager, useInput} from 'ink';

const Example = () => {
	const {focus} = useFocusManager();

	useInput(input => {
		if (input === 's') {
			// Focus the component with focus ID 'someId'
			focus('someId');
		}
	});

	return …
};