Focus switcher for React and Preact input components.
For React
yarn add react-input-focus
For Preact
yarn add preact-input-focus
import { FocusableProvider, FocusableInput } from 'react-input-focus' // or from 'preact-input-focus'
const Input = props => (
<FocusableInput>
{ ({ focusableInputRef, focusNextInput }) => (
<input
{...props}
ref={focusableInputRef}
onKeyPress={(ev) => {
if (ev.key === 'Enter') {
focusNextInput()
}
}}
/>
) }
</FocusableInput>
)
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>
)
children(focusableValue)
index
- overrides input index and changes focus order
focusableInputRef()
focusInput(index)
focusNextInput()