A layer that stops events from propagating and/or prevents the default behaviour of an element.

• it looks good
• some libraries don't allow you to handle the events, this is the last resort

You can list any event you want to be affected as props. Even just one!

<div onClick={this.wontHappen}>
    <Prevention click dblClick mouseDown>
        <Button onClick={this.willHappen}>Click Me</Button>
    </Prevention>
</div>

You can turn the wrapper into an inline element with the inline prop.

<span onClick={this.wontHappen}>
    <Prevention click inline>
        <span onClick={this.willHappen}>Click Me</span>
    </Prevention>
</span>

You can use the allowPropagation or allowDefault props.

<div onClick={this.willHappenToo}>
    <Prevention click allowPropagation>
        <Button onClick={this.willHappen}>Click Me</Button>
    </Prevention>
</div>

• Any camelCase event to affect. {boolean} Example: click, onClick, dblClick, onDblClick...
• allowPropagation {boolean} Allows the default behaviour of the child components
• allowDefault {boolean} Allows propagation to the parent components
• inline {boolean} Turns the wrapping element into a span
• style {Object} Adds CSS rules to the wrapper

See LICENSE file.

Feel free to contribute to the project. Main takeaways:

• only PR code passing eslint and prettier checks
• don't break API whenever possible (breaking API will require a new major version)
• create an issue first if you're about to embark a long journey so we can discuss about it