react-input-focus

Focus switcher for React input components.

Installation

yarn add react-input-focus

Demo

Demo / Source

Usage

import React, { Fragment } from 'react'
import { FocusableProvider, FocusableInput } from 'react-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()