react-focusit v0.1.0

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