It is a trap! A lock for a Focus. 🔓
React 16.8 is now required, nothing else changed, nothing else added
No new features.
👉60% Bundle Size decrease*
if you want
After getting some complaints about the size of this library(almost 4kb), I've spent some time trying to solve named issue. And partially solved it - literally by splitting the code into to parts.
sidecar
pattern has been used to split library code into the UI part(1.5kb), and Effect part(2.6kb) part, which would be executed only after Lock activation.Even if 2.6kb might be not enough to put sidecar into the separate chunk - the code with it, which may be bundled among the UI part, would not be executed before the time, reducing script execution time.
import FocusLockUI from 'react-focus-lock/UI
- a DOM part of a lock.import Sidecar from 'react-focus-lock/sidecar
- which is the real focus lock.import FocusLockUI from "react-focus-lock/UI";
import {sidecar} from "use-sidecar";
// prefetch sidecar. data would be loaded, but js would not be executed
const FocusLockSidecar = sidecar(
() => import(/* webpackPrefetch: true */ "react-focus-lock/sidecar")
);
<FocusLockUI
disabled={this.state.disabled}
sideCar={FocusLockSidecar}
>
{content}
</FocusLockUI>
Probably that's not the easiest way to use this lib, but - just extract this code somewhere, thus abstract from the implementation details. 2.6kb here, 4kb there - that's how we are going to win.
className
div
.Deprecation:
enableTextSelection
prop got deprecated, and is enabled by default(#10)Features:
autoFocus
prop allows you do disable focusing-on-mount behaviour [#20]. Defaults to truepersistentFocus
prop allows to enable sticky, never bluring, focus. Defaults to false.Changes: