Home

Awesome

<div align="center"> <h1>👁 React-Focus-On </h1> <br/> lock and loaded! <br/> <a href="https://www.npmjs.com/package/react-focus-on"> <img src="https://img.shields.io/npm/v/react-focus-on.svg?style=flat-square" /> </a> <a href="https://travis-ci.org/theKashey/react-focus-on"> <img src="https://img.shields.io/travis/theKashey/react-focus-on.svg?style=flat-square" alt="Build status"> </a> <a href="https://www.npmjs.com/package/react-focus-on"> <img src="https://img.shields.io/npm/dm/react-focus-on.svg" alt="npm downloads"> </a> <a href="https://bundlephobia.com/result?p=react-focus-on"> <img src="https://img.shields.io/bundlephobia/minzip/react-focus-on.svg" alt="bundle size"> </a> <br/> </div>

The final solution for WAI ARIA compatible Modal Dialogs or any full-screen tasks:

Now you could focus on a single task.

This is basically the inert

Minimal size - no more than 2kb, maximal - no more that 6kb. See sidecar example for details.

Example

Code sandbox example - https://codesandbox.io/s/p3vjp8mzw7

import {FocusOn} from 'react-focus-on';

<FocusOn
 onClickOutside={callback}
 onEscapeKey={callback}
 shards={[externalRef]}
>
 content you should be "focused" on
</FocusOn>

API

FocusOn

FocusOn - the focus on component





Additional API

Exposed from React-Focus-Lock

See react-focus-lock documentation for details.

Exposed from React-Remove-Scroll

See react-remove-scroll for details.

PS: Version 1 used React-scroll-locky which was replaced by remove-scroll.

Size


Import full

import {FocusOn} from 'react-focus-on';

<FocusOn>
 {content}
</FocusOn> 

Import UI only

import {FocusOn} from 'react-focus-on/UI';
import {sidecar} from "use-sidecar";

const FocusOnSidecar = sidecar(  
  () => import(/* webpackPrefetch: true */ "react-focus-on/sidecar")
);

<FocusOn
    sideCar={FocusOnSidecar}
>
 {content}
</FocusOn> 

React versions

Licence

MIT