@teste-ui/clickable

React hook that implements all the interactions of a native button component with support for making it focusable even if it is disabled.

It can be used with both native button elements or other elements (like div).

Installation

1import { useClickable } from "@teste-ui/clickable"

Usage

1// create a clickable primitive
2const Clickable = (props) => {
3  const clickable = useClickable(props)
4  return <chakra.button display="inline-flex" {...clickable} />
5}
6
7// use the clickable primitive
8const Example = () => (
9  <Clickable
10    as="div"
11    onClick={(event) => {
12      alert("clicked")
13    }}
14    _active={{ bg: "blue", color: "white" }}
15    _disabled={{ opacity: 0.4, pointerEvents: "none" }}
16  >
17    Clickable
18  </Clickable>
19)