Home

Awesome

react-locky

CircleCI status Greenkeeper badge


NPM

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.

Default events

Example

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

Related

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.

<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