preact-input-focus v1.1.6

preact-input-focus

Focus switcher for Preact input components.

Installation

yarn add preact-input-focus

Demo

Demo / Source

Usage

import { h, Fragment } from 'preact'
import { FocusableProvider, FocusableInput } from 'preact-input-focus'

const Input = props => (
  <FocusableInput>
    { ({ focusableInputRef, focusNextInput }) => (
      <input
        {...props}
        ref={focusableInputRef}
        onKeyPress={(ev) => {
          if (ev.key === 'Enter') focusNextInput()
        }}
      />
    ) }
  </FocusableInput>
)

export default () => (
  <FocusableProvider>
    <Fragment>
      <Input placeholder="#1 Focus next input on Enter" />
      <Input placeholder="#2 Focus next input on Enter" />
      <Input placeholder="#3" />
    </Fragment>
  </FocusableProvider>
)

API

FocusableInput props

• children()
• index - overrides input index and changes focus order

Object that passed to the FocusableInput child function

• focusableInputRef()
• focusInput(index)
• focusNextInput()