react-focuser

2.0.2 • Public • Published

react-focuser

npm

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

Package Sidebar

Install

npm i react-focuser

Weekly Downloads

1

Version

2.0.2

License

UNLICENSED

Unpacked Size

11.9 kB

Total Files

8

Last publish

Collaborators

  • fakundo