react-focuser

Focus switcher for React and Preact components.

Installation

yarn add react-focuser

Demo

Demo / Source

Usage

Select React or Preact somewhere in root of your app

import 'react-focuser/useReact'
// or 
import 'react-focuser/usePreact'

Make inputs and forms

import React, { Fragment } from 'react'
import { FocusableProvider, Focusable } from 'react-focuser'

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

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

Object passed to Focusable children

• focusableRef
• focusInput(index)
• focusNextInput()
• index - override input index to change focus order