@crave/farmblocks-hoc-disabled-tooltip

A Higher Order Component that adds the behaviour of displaying a tooltip when a component is disabled (disabled property true)

Stats

StarsIssuesVersionUpdatedCreatedSize
@crave/farmblocks-hoc-disabled-tooltip
20252.2.83 years ago4 years agoMinified + gzip package size for @crave/farmblocks-hoc-disabled-tooltip in KB

Readme

Farmblocks Disabled Tooltip HOC

A Higher Order Component that adds the behaviour of displaying a tooltip when a component is disabled (disabled property true)

Installation

npm install @crave/farmblocks-hoc-disabled-tooltip

Usage

import React from "react";
import ReactDOM from "react-dom";
import disabledTooltip from "@crave/farmblocks-hoc-disabled-tooltip";

const MyComponent = ({ children, ...props }) => (
  <button {...props}>{children}</button>
);
const ButtonWithDisabledTooltip = disabledTooltip(MyComponent);

const root = document.createElement("div");

ReactDOM.render(
  <div>
    <ButtonWithDisabledTooltip>
      My Button
    </ButtonWithDisabledTooltip>
    <ButtonWithDisabledTooltip
      disabled
      tooltipText="my custom text"
      tooltipAlign="right"
    >
      My Disabled Button
    </ButtonWithDisabledTooltip>
  </div>,
  root
);

document.body.appendChild(root);

See more examples in the stories file.

API

This HOC will add the following properties to a given component:

Property Type Description
disabled Boolean a flag that indicates that the element is disabled, and so should display the tooltip
tooltipAlign String, one of "left" or "right" Which side to align the disabled tooltip balloon
tooltipText String A custom text to display as tooltip when the component is disabled
displayBlock Boolean use this flag to override the default css style of the resulting element from inline-block to block

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.