react-prevent-clickthrough #

Simple function to block event propagation and stop React's SyntheticEvent when clicking on an item.

Installation

In your React project directory simply install via npm using

``npm 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

);

export default SampleComponent
`

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 .