Skip to content

"πŸ”’-y" – Asgardian God of Event Scoping πŸ“¦, Scroll Locking πŸ“œ, Silence Casting πŸ™Š

License

Notifications You must be signed in to change notification settings

theKashey/react-locky

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

83 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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.

  • 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

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

About

"πŸ”’-y" – Asgardian God of Event Scoping πŸ“¦, Scroll Locking πŸ“œ, Silence Casting πŸ™Š

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •