@chakra-ui/clickable
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

@chakra-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

import { useClickable } from "@chakra-ui/clickable"

Usage

// create a clickable primitive
const Clickable = (props) => {
  const clickable = useClickable(props)
  return <chakra.button display="inline-flex" {...clickable} />
}

// use the clickable primitive
const Example = () => (
  <Clickable
    as="div"
    onClick={(event) => {
      alert("clicked")
    }}
    _active={{ bg: "blue", color: "white" }}
    _disabled={{ opacity: 0.4, pointerEvents: "none" }}
  >
    Clickable
  </Clickable>
)

Package Sidebar

Install

npm i @chakra-ui/clickable

Weekly Downloads

537,244

Version

2.1.0

License

MIT

Unpacked Size

105 kB

Total Files

22

Last publish

Collaborators

  • segunadebayo
  • _codebender828