react-focusit

React component for focusing element on its 'mount' hook

Usage

import Focus from 'react-focusit';
 
...
 
render() {
    return <Focus><input {...props} /></Focus>;
}

You can use custom focusable component, that implements focus method:

import Focus from 'react-focusit';
import Input from 'some-ui-kit';
 
...
 
render() {
    return (
        <Focus>
            <Input {...props} />
        </Focus>
    );
}

Or use HOC to proxy ref to focusable component:

import Focus from 'react-focusit';
import Input from 'some-ui-kit';
 
function InputHoc({ innerRef }) {
    return <Input ref={innerRef} />;
}
 
...
 
render() {
    return (
        <Focus useInnerRef>
            <InputHoc />
        </Focus>
    );
}
 

You can provide custom ref prop as well:

import Focus from 'react-focusit';
import Input from 'some-ui-kit';
import React from 'react';
 
class InputHoc extends React.Component {
    render() {
        return <Input ref={this.props.customRef} />;
    }
}
 
...
 
render() {
    return (
        <Focus useInnerRef="customRef" innerRef={getFocusableComponent}>
            <InputHoc ref={getComponentRef} />
        </Focus>
    );
}
 

In the example above getFocusableComponent will get Input instance as argument and getComponentRef will get InputHoc instance.

props

prop	type	default	description
innerRef	function(instance)		provides child instance/element reference. If you don't using useInnerRef prop, use innerRef instead of ref prop directly on child component
preventScroll	boolean	false	parameter for HtmlElement.prototype.focus, preventing scrolling to focused element
withSelection	boolean	false	using with <input />, <textarea /> as focusable component or components with custom select method implementation. Selecting inner text.
children	ReactNode		must be a single child, we are using React.Children.only to check single react node
useInnerRef	boolean\|string	false	If true using innerRef prop to get focusable component instance, if type string will use custom prop name