https://github.com/fakundo/react-input-focus

Focus switcher for React and Preact input components
https://github.com/fakundo/react-input-focus

focus input react

Last synced: 6 months ago
JSON representation

Focus switcher for React and Preact input components

• Host: GitHub
• URL: https://github.com/fakundo/react-input-focus
• Owner: fakundo
• Created: 2020-02-14T13:41:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T01:55:07.000Z (over 3 years ago)
• Last Synced: 2025-03-18T13:08:46.484Z (over 1 year ago)
• Topics: focus, input, react
• Language: JavaScript
• Homepage: https://fakundo.github.io/react-input-focus/react/
• Size: 1.53 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-input-focus / preact-input-focus

[![npm](https://img.shields.io/npm/v/react-input-focus.svg)](https://www.npmjs.com/package/react-input-focus)

Focus switcher for React and Preact input components.

### Installation

  

For React

```

yarn add react-input-focus

```

  

For Preact

```

yarn add preact-input-focus

```

### Demo

[Demo](https://fakundo.github.io/react-input-focus/react/)

/

[Source](https://github.com/fakundo/react-input-focus/tree/master/packages/react-input-focus/examples)

### Usage

```javascript

import { FocusableProvider, FocusableInput } from 'react-input-focus' // or from 'preact-input-focus'

const Input = props => (

  

    { ({ focusableInputRef, focusNextInput }) => (

       {

          if (ev.key === 'Enter') {

            focusNextInput()

          }

        }}

      />

    ) }

  

)

export default () => (

  

    

      

      

      

    

  

)

```

### API

#### `FocusableInput` props

- `children(focusableValue)`

- `index` - overrides input index and changes focus order

#### `focusableValue` has the following structure

- `focusableInputRef()`

- `focusInput(index)`

- `focusNextInput()`