Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mirodojkic/react-clickable
Clickable component that enables nesting other button and anchor elements.
https://github.com/mirodojkic/react-clickable
anchor button event-propagation react ui
Last synced: about 1 month ago
JSON representation
Clickable component that enables nesting other button and anchor elements.
- Host: GitHub
- URL: https://github.com/mirodojkic/react-clickable
- Owner: MiroDojkic
- License: mit
- Created: 2017-11-01T21:37:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-07-07T05:01:56.000Z (over 3 years ago)
- Last Synced: 2025-01-03T06:38:20.618Z (about 1 month ago)
- Topics: anchor, button, event-propagation, react, ui
- Language: JavaScript
- Size: 638 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-clickable
Clickable and [Accessible (a11y)](https://a11yproject.com/) React components with zero configuration. Nesting supported.
Check out the [demo](https://stackblitz.com/edit/react-clickable-demo?file=Item.js).
## 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.
```javascript
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 () {
Some clickable content!
}
}
```
## Clickable props
| Property | Type | Description | Default |
| --------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| **onClick** | _Function_ | Event handler for `Clickable`'s' `onClick` event | - |
| **onMouseDown** | _Function_ | Event handler for `Clickable`'s' `onmouseDown` event | - |
| **onKeyDown** | _Function_ | Custom event handler called on `Enter` or `Space` key press, when `Clickable` component is focused. When not provided, the first callback available among `props.onClick` and `props.onMouseDown` will be called. | - |
| **ariaLabel** | _String_ | Accessible name for `Clickable` component | - |
| **role** | _String_ | [ARIA role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) assigned to rendered div | `"button"` |
| **tabIndex** | _Number_ | tabIndex assigned to rendered div | `0` |
At least one among **onClick** or **onMouseDown** callback must be **mandatorily declared**.
**Any other property** will be forwarded to the rendered div.
## StopPropagation props
| Property | Type | Description | Default |
| ------------- | -------- | ------------------------------------------- | ------- |
| **children** | _Node_ | Elements rendered inside `StopPropagation`. | - |
| **className** | _String_ | CSS class for rendered div | - |
## 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](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Miro Dojkic](https://github.com/MiroDojkic)
[💻](https://github.com/MiroDojkic/react-clickable/commits?author=MiroDojkic "Code") [💬](#question-MiroDojkic "Answering Questions") [📖](https://github.com/MiroDojkic/react-clickable/commits?author=MiroDojkic "Documentation") [💡](#example-MiroDojkic "Examples") [🤔](#ideas-MiroDojkic "Ideas, Planning, & Feedback") [🚇](#infra-MiroDojkic "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-MiroDojkic "Reviewed Pull Requests") [⚠️](https://github.com/MiroDojkic/react-clickable/commits?author=MiroDojkic "Tests") | [
Andrea Carraro](http://www.andreacarraro.it)
[💻](https://github.com/MiroDojkic/react-clickable/commits?author=toomuchdesign "Code") [📖](https://github.com/MiroDojkic/react-clickable/commits?author=toomuchdesign "Documentation") [🤔](#ideas-toomuchdesign "Ideas, Planning, & Feedback") [🚇](#infra-toomuchdesign "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/MiroDojkic/react-clickable/commits?author=toomuchdesign "Tests") |
| :---: | :---: |