Prevents an event from propagating/bubbling through React's Virtual DOM during onClick. Also allows for conveniently passing a behavior while preventing clickthrough for less boilerplate/alternate ways to pass behavior in the callback.
npm install react-prevent-clickthroughnpm i react-prevent-clickthrough`
Usage
In your component's onClick event, pass it a function which calls
preventClickthrough before other events to ensure you cannot click on
items underneathe that item.
`
import React from 'react'
import preventClickthrough from 'react-prevent-clickthrough'
var outerContainerEvent = function(e)
{
console.log('container has been clicked');
};
var innerContainerEvent = function(e)
{
preventClickthrough(e);
console.log('inner container was clicked; outer should not run!');
};
// note: innerContainerEvent could also be written:
// preventClickthrough(e, otherCallbackFn);
var SampleComponent = (props, context)=>
(
style={{ border : '1px solid #000000', padding: '8px' }}
>
outer container
style={{ backgroundColor : '#FFFFFF' }}
>
inner container
If a user clicks on SampleComponent within the "inner container", they will see that an event is fired
but not for the outer container since preventClickthrough` disabled an event from bubbling up .