react-locky

Loki - is God of Mischief, Madness and Evil!

Locky - is God of Locks, Event capturing and Stealing. Small and very slender brother - just 1.7kb.

Locky will never let event escape the target node, will prevent scrolls outside, will do the HTML5 inert job. Locky will completely disable any user iterations outside of nested children.

import Locky from 'react-locky';

 <div>
     <Button>You will be unable to press</Button>
     <Scrollable>You will be unable to scroll</Scrollable

     <Locky>
        <Button>You will be ABLE to press</Button>
        <Scrollable>You will be able to scroll</Scrollable
     </Locky>

     // you can tune behavior
     <Locky events={{keydown: false}}>
       // Locky got everything, except keydown        
     </Locky>
 </div>

In case you need to lock only scroll

 <Locky noDefault events={{scroll: true}}> .... </Locky>

API

Locky accepts a few props.

• enabled[=true], controls Locky behavior.
• onEscape, will be triggered when someone will try "escape" the lock. See "report" events below
• noDefault[=false], disables all "default" events
• events[=defaultEvents], DOM events to manage
• group[=null], focus group id. Locks with the same group will not block each other. You may setup groups manually by adding data-locky-group={name} attribute anywhere.
• component[=div], allows to replace HTML tag.
• className[=null], Locky will forward className to component.
• headless[=false], Locky will not create component, but will use the first node inside it (groups will probably not work).
• leaded[=false], Locky will work only with "group" leader - mounted last instance for the provided group.

Default events

• click: 'report' (will call onEscape)
• mousemove: true,
• mousedown: 'report' (will call onEscape)
• touchmove: true,
• touchstart: 'report' (will call onEscape)
• keydown: true,
• focus: false, (focus is unblockable)
• change: false,
• scroll: true, (scroll is handled separately)
• wheel: true,

Example

• https://codesandbox.io/s/0ok0pz7vml - "Scroll" locky
• https://codesandbox.io/s/l7nrkv1rnq - simple Locky
• https://codesandbox.io/s/k55641yx6o - a bit more complex

Tip

Probably you don't need to hook a keyboard. It will also block page refresh events.

<Locky events={{keydown:false}} />

important tip for Mobile Safary - while normal "touch move" will scroll "scrollable" container, touch+move started on inputs will start drag-n-drop and cause whole layer(modal/page) scroll. (it will just scroll as a 💩, or not scroll at all).

To disable this behavior - apply -webkit-overflow-scrolling: touch; on the page.

Locky in non-headless mode will produce a div. That div could be something you dont want to have. Feel free to set a className prop, with class holding display:inline - as a result parasite div will shrink to 1 pixel.

Other usages

Just track clicks outside your element

<Locky noDefault events={{click:'report-only'}} onEscape={onOuterElementClick}>
  ...your content
</Locky>

More tools

Locky also exposes LockyTransparent component, which makes everything inside invisible to Locky

import {LockyTransparent} from 'react-locky';

<LockyTransparent>this content will be "locky"-free</LockyTransparent>

ScrollBars

Locks will not hide your scroll bars! And there is no way to prevent scrolling using the scroll bars. You have to use react-scrolllock to complitely disable scroll, or Strollable from react-stroller to hide scroll bars.

Article

• How to train your scroll - a medium article.

Related

• react-focus-lock - to scope focus

  Locky could not manage focus itself, as long there is no way to "preventDefault" it. Once you will "tab-out", you will not be able to "tab-in", as long key events are blocked.

• dom-locky - Vanilla DOM API implimentation of Locky.

• react-stroller - React scrollbar manager. To hide or replace.

• react-scroll-locky - to scope scroll(via locky) and remove scroll bars.

  <Locky noDefault events={{scroll:true}} /> will do almost the same, but differently. As long react-scroll-captor manage "scroll" for children, locky could manage scroll for any target inside. Ie - if you have scrollable, inside scrollable, or scrollable is not a top-most node - react-scroll-captor will not work, while Locky will.

Licence

MIT