https://github.com/rob2d/react-prevent-clickthrough
Simple function to block event propagation and stop React's SyntheticEvent when clicking on an item.
https://github.com/rob2d/react-prevent-clickthrough
Last synced: about 2 months ago
JSON representation
Simple function to block event propagation and stop React's SyntheticEvent when clicking on an item.
- Host: GitHub
- URL: https://github.com/rob2d/react-prevent-clickthrough
- Owner: rob2d
- Created: 2017-04-06T01:03:35.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-06T01:28:11.000Z (about 9 years ago)
- Last Synced: 2026-03-24T04:25:22.318Z (2 months ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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)=>
(
outer container
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 .