react-focusit
React component for focusing element on its 'mount' hook
Usage
import Focus from 'react-focusit'; ... { return <Focus><input /></Focus>;}You can use custom focusable component, that implements focus method:
import Focus from 'react-focusit';import Input from 'some-ui-kit'; ... { return <Focus> <Input /> </Focus> ;}Or use HOC to proxy ref to focusable component:
import Focus from 'react-focusit';import Input from 'some-ui-kit'; { return <Input = />;} ... { return <Focus > <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'; Component { return <Input = />; } ... { return <Focus ="customRef" => <InputHoc = /> </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 |