Guide
Reference
Roadmap
Guide
Reference
Roadmap

useFocus

Tags:
Element

A React Hook that allows you to focus on an element when it is mounted.

Demo

Source
Welcome, 🐵
`#el-focus-i` Focused:
true
`#el-focus-b` Focused:
false
`#el-focus-p` Focused:
false

Paragraph #el-focus-p

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const focus = useFocus(elementTarget, options)

ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.

Options

export type UseFocusOptions = {
  /**
   * initial focus state
   *
   * @defaultValue false
   */
  initialValue?: boolean
}

Returns

export type UseFocusReturns = readonly [
  /**
   * focus state
   */
  focused: boolean,
  /**
   * focus actions
   */
  actions: {
    /**
     * focus the target element
     */
    focus(): void
    /**
     * blur the target element
     */
    blur(): void
  },
]