Nihilist Postmodern Mistake

    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

    Install

    npm i react-focuser

    DownloadsWeekly Downloads

    8

    Version

    2.0.2

    License

    UNLICENSED

    Unpacked Size

    11.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • fakundo