react-clickable v1.1.0

react-clickable

Clickable and Accessible (a11y) React components with zero configuration. Nesting supported. Check out the demo.

Components:

• Clickable - accessible clickable component
• StopPropagation - stops event propagation to make a child of Clickable unclickable

:warning: Although this is considered bad practice in UI design, there are exceptions wherein accessible clickable component comes in handy. Nevertheless, please reconsider if this is the right way to implement what you want.

Install

npm install --save react-clickable

Usage

:heavy_exclamation_mark: When nesting interactive elements, make sure to stop event propagation.

import React, {Component} from 'react';
import { Clickable, StopPropagation } from 'react-clickable';

class Item extends Component {
  state = { showModal: false };

  onSelect () {
    console.log('Item selected!');
  }

  showTooltip (e) {
    e.stopPropagation();

    console.log('Showing tooltip...');
  }

  showModal() {
    this.setState(state => ({
      showModal: !state.showModal
    }))
  }

  render () {
    <Clickable onClick={this.onSelect}>
      <StopPropagation>
        <SomeModal
          show={this.state.showModal}
          onClick={this.showModal}
        />
      </StopPropagation>
      <div>Some clickable content!</div>
      <button
        onClick={this.showTooltip} />
      </button>
    </Clickable>
  }
}

Clickable props

At least one among onClick or onMouseDown callback must be mandatorily declared.

Any other property will be forwarded to the rendered div.

StopPropagation props

Contribute

If you find something missing or not working properly feel free to contribute or open an issue.

License

MIT

Contributors

Thanks to you all (emoji key):