npm

Join us for the "JavaScript Supply Chain Security" tech talk, presented by VP of Security, Adam Baldwin. 6/20 at 10am PT.Sign up here »

react-focuser

2.0.0 • 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

install

npm i react-focuser

Downloadsweekly downloads

6

version

2.0.0

license

UNLICENSED

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability