Neurotoxin Powered Marketing

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

    1.1.6 • 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>
    )

    Install

    npm i @chakra-ui/clickable

    DownloadsWeekly Downloads

    113,114

    Version

    1.1.6

    License

    MIT

    Unpacked Size

    107 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar