@vx/tooltip - npm Package Compare versions

Comparing version 0.0.194 to 0.0.195

esm/enhancers/withTooltip.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React from 'react';
+import useTooltip from '../hooks/useTooltip';
 export default function withTooltip(BaseComponent, containerProps, renderContainer) {
-  var _temp;
-
   if (containerProps === void 0) {
@@ -29,76 +22,8 @@ containerProps = {
 
-  return _temp =
-  /*#__PURE__*/
-  function (_React$PureComponent) {
-    _inheritsLoose(WrappedComponent, _React$PureComponent);
+  var WrappedComponent = function WrappedComponent(props) {
+    var tooltipProps = useTooltip();
+    return renderContainer(React.createElement(BaseComponent, _extends({}, tooltipProps, props)), containerProps);
+  };
 
-    function WrappedComponent() {
-      var _this;
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
-
-      _defineProperty(_assertThisInitialized(_this), "state", {
-        tooltipOpen: false,
-        tooltipLeft: undefined,
-        tooltipTop: undefined,
-        tooltipData: undefined
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "updateTooltip", function (_ref) {
-        var tooltipOpen = _ref.tooltipOpen,
-            tooltipLeft = _ref.tooltipLeft,
-            tooltipTop = _ref.tooltipTop,
-            tooltipData = _ref.tooltipData;
-
-        _this.setState(function (prevState) {
-          return _extends({}, prevState, {
-            tooltipOpen: tooltipOpen,
-            tooltipLeft: tooltipLeft,
-            tooltipTop: tooltipTop,
-            tooltipData: tooltipData
-          });
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "showTooltip", function (_ref2) {
-        var tooltipLeft = _ref2.tooltipLeft,
-            tooltipTop = _ref2.tooltipTop,
-            tooltipData = _ref2.tooltipData;
-
-        _this.updateTooltip({
-          tooltipOpen: true,
-          tooltipLeft: tooltipLeft,
-          tooltipTop: tooltipTop,
-          tooltipData: tooltipData
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "hideTooltip", function () {
-        _this.updateTooltip({
-          tooltipOpen: false,
-          tooltipLeft: undefined,
-          tooltipTop: undefined,
-          tooltipData: undefined
-        });
-      });
-
-      return _this;
-    }
-
-    var _proto = WrappedComponent.prototype;
-
-    _proto.render = function render() {
-      return renderContainer(React.createElement(BaseComponent, _extends({
-        updateTooltip: this.updateTooltip,
-        showTooltip: this.showTooltip,
-        hideTooltip: this.hideTooltip
-      }, this.state, this.props)), containerProps);
-    };
-
-    return WrappedComponent;
-  }(React.PureComponent), _temp;
+  return WrappedComponent;
 }

esm/index.js

 export { default as withTooltip } from './enhancers/withTooltip';
+export { default as useTooltip } from './hooks/useTooltip';
 export { default as Tooltip } from './tooltips/Tooltip';
 export { default as TooltipWithBounds } from './tooltips/TooltipWithBounds';

lib/enhancers/withTooltip.d.ts

@@ -1,86 +0,8 @@
-import React, { ReactElement, ReactNode } from 'react';
-export declare type WithTooltipProvidedProps<TooltipData = {}> = {
-    tooltipOpen: boolean;
-    tooltipLeft?: number;
-    tooltipTop?: number;
-    tooltipData?: TooltipData;
-    updateTooltip: (args: UpdateTooltipArgs<TooltipData>) => void;
-    showTooltip: (args: ShowTooltipArgs<TooltipData>) => void;
-    hideTooltip: () => void;
-};
-declare type WithTooltipState<TooltipData> = Pick<WithTooltipProvidedProps<TooltipData>, 'tooltipOpen' | 'tooltipLeft' | 'tooltipTop' | 'tooltipData'>;
-declare type ShowTooltipArgs<TooltipData> = Omit<WithTooltipState<TooltipData>, 'tooltipOpen'>;
-declare type UpdateTooltipArgs<TooltipData> = WithTooltipState<TooltipData>;
+import React, { ReactElement } from 'react';
+import { UseTooltipParams } from '../hooks/useTooltip';
+export declare type WithTooltipProvidedProps<TooltipData> = UseTooltipParams<TooltipData>;
 declare type WithTooltipContainerProps = React.HTMLProps<HTMLDivElement>;
-declare type RenderTooltipContainer = (children: ReactElement, containerProps?: WithTooltipContainerProps) => ReactNode;
-export default function withTooltip<BaseComponentProps = {}, TooltipData = {}>(BaseComponent: React.ComponentType<BaseComponentProps & WithTooltipProvidedProps<TooltipData>>, containerProps?: WithTooltipContainerProps, renderContainer?: RenderTooltipContainer): {
-    new (props: Readonly<BaseComponentProps>): {
-        state: {
-            tooltipOpen: boolean;
-            tooltipLeft: undefined;
-            tooltipTop: undefined;
-            tooltipData: undefined;
-        };
-        updateTooltip: ({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData, }: Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">) => void;
-        showTooltip: ({ tooltipLeft, tooltipTop, tooltipData }: Pick<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">, "tooltipLeft" | "tooltipTop" | "tooltipData">) => void;
-        hideTooltip: () => void;
-        render(): React.ReactNode;
-        context: any;
-        setState<K extends "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">(state: Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData"> | ((prevState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, props: Readonly<BaseComponentProps>) => Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData"> | Pick<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">, K> | null) | Pick<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<BaseComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<BaseComponentProps>, nextState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<BaseComponentProps>, prevState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>): any;
-        componentDidUpdate?(prevProps: Readonly<BaseComponentProps>, prevState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<BaseComponentProps>, nextState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<BaseComponentProps>, nextState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, nextContext: any): void;
-    };
-    new (props: BaseComponentProps, context?: any): {
-        state: {
-            tooltipOpen: boolean;
-            tooltipLeft: undefined;
-            tooltipTop: undefined;
-            tooltipData: undefined;
-        };
-        updateTooltip: ({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData, }: Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">) => void;
-        showTooltip: ({ tooltipLeft, tooltipTop, tooltipData }: Pick<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">, "tooltipLeft" | "tooltipTop" | "tooltipData">) => void;
-        hideTooltip: () => void;
-        render(): React.ReactNode;
-        context: any;
-        setState<K extends "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">(state: Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData"> | ((prevState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, props: Readonly<BaseComponentProps>) => Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData"> | Pick<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">, K> | null) | Pick<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<BaseComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<BaseComponentProps>, nextState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<BaseComponentProps>, prevState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>): any;
-        componentDidUpdate?(prevProps: Readonly<BaseComponentProps>, prevState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<BaseComponentProps>, nextState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<BaseComponentProps>, nextState: Readonly<Pick<WithTooltipProvidedProps<TooltipData>, "tooltipOpen" | "tooltipLeft" | "tooltipTop" | "tooltipData">>, nextContext: any): void;
-    };
-    contextType?: React.Context<any> | undefined;
-};
+declare type RenderTooltipContainer = (children: ReactElement, containerProps?: WithTooltipContainerProps) => ReactElement;
+export default function withTooltip<BaseComponentProps = {}, TooltipData = {}>(BaseComponent: React.ComponentType<BaseComponentProps & WithTooltipProvidedProps<TooltipData>>, containerProps?: WithTooltipContainerProps, renderContainer?: RenderTooltipContainer): React.FunctionComponent<BaseComponentProps>;
 export {};
 //# sourceMappingURL=withTooltip.d.ts.map

lib/enhancers/withTooltip.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _useTooltip = _interopRequireDefault(require("../hooks/useTooltip"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -13,11 +15,3 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function withTooltip(BaseComponent, containerProps, renderContainer) {
-  var _temp;
-
   if (containerProps === void 0) {
@@ -39,76 +33,8 @@ containerProps = {
 
-  return _temp =
-  /*#__PURE__*/
-  function (_React$PureComponent) {
-    _inheritsLoose(WrappedComponent, _React$PureComponent);
+  var WrappedComponent = function WrappedComponent(props) {
+    var tooltipProps = (0, _useTooltip.default)();
+    return renderContainer(_react.default.createElement(BaseComponent, _extends({}, tooltipProps, props)), containerProps);
+  };
 
-    function WrappedComponent() {
-      var _this;
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
-
-      _defineProperty(_assertThisInitialized(_this), "state", {
-        tooltipOpen: false,
-        tooltipLeft: undefined,
-        tooltipTop: undefined,
-        tooltipData: undefined
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "updateTooltip", function (_ref) {
-        var tooltipOpen = _ref.tooltipOpen,
-            tooltipLeft = _ref.tooltipLeft,
-            tooltipTop = _ref.tooltipTop,
-            tooltipData = _ref.tooltipData;
-
-        _this.setState(function (prevState) {
-          return _extends({}, prevState, {
-            tooltipOpen: tooltipOpen,
-            tooltipLeft: tooltipLeft,
-            tooltipTop: tooltipTop,
-            tooltipData: tooltipData
-          });
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "showTooltip", function (_ref2) {
-        var tooltipLeft = _ref2.tooltipLeft,
-            tooltipTop = _ref2.tooltipTop,
-            tooltipData = _ref2.tooltipData;
-
-        _this.updateTooltip({
-          tooltipOpen: true,
-          tooltipLeft: tooltipLeft,
-          tooltipTop: tooltipTop,
-          tooltipData: tooltipData
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "hideTooltip", function () {
-        _this.updateTooltip({
-          tooltipOpen: false,
-          tooltipLeft: undefined,
-          tooltipTop: undefined,
-          tooltipData: undefined
-        });
-      });
-
-      return _this;
-    }
-
-    var _proto = WrappedComponent.prototype;
-
-    _proto.render = function render() {
-      return renderContainer(_react.default.createElement(BaseComponent, _extends({
-        updateTooltip: this.updateTooltip,
-        showTooltip: this.showTooltip,
-        hideTooltip: this.hideTooltip
-      }, this.state, this.props)), containerProps);
-    };
-
-    return WrappedComponent;
-  }(_react.default.PureComponent), _temp;
+  return WrappedComponent;
 }

lib/index.d.ts

 export { default as withTooltip } from './enhancers/withTooltip';
+export { default as useTooltip } from './hooks/useTooltip';
 export { default as Tooltip } from './tooltips/Tooltip';
 export { default as TooltipWithBounds } from './tooltips/TooltipWithBounds';
 //# sourceMappingURL=index.d.ts.map

lib/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.TooltipWithBounds = exports.Tooltip = exports.withTooltip = void 0;
+exports.TooltipWithBounds = exports.Tooltip = exports.useTooltip = exports.withTooltip = void 0;
 
@@ -10,2 +10,6 @@ var _withTooltip = _interopRequireDefault(require("./enhancers/withTooltip"));
 
+var _useTooltip = _interopRequireDefault(require("./hooks/useTooltip"));
+
+exports.useTooltip = _useTooltip.default;
+
 var _Tooltip = _interopRequireDefault(require("./tooltips/Tooltip"));
@@ -12,0 +16,0 @@

package.json

 {
   "name": "@vx/tooltip",
-  "version": "0.0.194",
+  "version": "0.0.195",
   "description": "vx tooltip",
@@ -33,3 +33,3 @@ "sideEffects": false,
     "@types/react": "*",
-    "@vx/bounds": "0.0.194",
+    "@vx/bounds": "0.0.195",
     "classnames": "^2.2.5",
@@ -39,3 +39,3 @@ "prop-types": "^15.5.10"
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.8.0-0"
   },
@@ -45,3 +45,3 @@ "publishConfig": {
   },
-  "gitHead": "b4a5f3429b9bf9435922821fc31fcc39996a2e67"
+  "gitHead": "217be78e66c2ff2920f69ebd0a1d6b50b7edbfd8"
 }

Readme.md

@@ -7,6 +7,123 @@ # @vx/tooltip
 
-The `@vx/tooltip` package provides utilities for making it easy to add `Tooltip`s to a visualization and includes higher-order component (HOC) enhancers and Tooltip components.
+The `@vx/tooltip` package provides utilities for making it easy to add `Tooltip`s to a visualization and includes hooks, higher-order component (HOC) enhancers and Tooltip components.
 
-### Example:
-``` js
+### Hooks and Enhancers
+
+This package provides two ways to add tooltip state logic to your chart components:
+
+- a hook: `useTooltip()` 
+- a higher order component (HOC): `withTooltip()`
+
+The `useTooltip` hook is the recommended way to add tooltip state logic to your components, but can only be used in functional components. The `withTooltip` HOC can be used with both functional and class components, and is the recommended way to add tooltip state logic to class components.
+
+Both `useTooltip` and `withTooltip` expose the same values and functions for use in your component:
+
+| Name          | Type   | Description                                                                                                                                           |
+| :------------ | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| showTooltip   | func   | Call this function with the signature `func({ tooltipData, tooltipLeft, tooltipTop })` to set the tooltip state to the specified values.              |
+| hideTooltip   | func   | Call this function to close a tooltip, i.e., set the `showTooltip` state to `false`.                                                                  |
+| tooltipOpen   | bool   | Whether the tooltip state is open or closed                                                                                                           |
+| tooltipLeft   | number | The `tooltipLeft` position passed to the `showTooltip` func, intended to be used for tooltip positioning                                              |
+| tooltipTop    | number | The `tooltipTop` position passed to the `showTooltip` func, intended to be used for tooltip positioning                                               |
+| tooltipData   | any    | The `tooltipData` value passed to the `showTooltip` func, intended to be used for any data that your tooltip might need to render                     |
+| updateTooltip | func   | Call this function with the signature `func({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData })` to set the tooltip state to the specified values. |
+
+In the case of `useTooltip`, these will be returned from the `useTooltip()` call in your component. In the case of `withTooltip`, they will be passed as props to your wrapped component. Refer to the [Examples](#examples) section for a basic demo of each approach.
+
+#### useTooltip()
+
+If you would like to add tooltip state logic to a functional component, you may use the `useTooltip()` hook which will return an object with several properties that you can use to manage the tooltip state of your component.
+
+#### withTooltip(BaseComponent [, containerProps [, renderContainer]])
+
+If you would like to add tooltip state logic to a class component, you may wrap it in `withTooltip(BaseComponent [, containerProps [, renderContainer])`.
+
+The HOC will wrap your component in a `div` with `relative` positioning by default and handle state for tooltip positioning, visibility, and content by injecting the following props into your `BaseComponent`:
+
+You may override the container by specifying `containerProps` as the second argument to `withTooltip`, or by specifying `renderContainer` as the third argument to `withTooltip`.
+
+### Components
+#### Tooltip
+
+This is a simple Tooltip container component meant to be used to actually render a Tooltip. It accepts the following props, and will spread any additional props on the tooltip container div (i.e., ...restProps):
+
+| Name      | Type             | Default | Description                                                                   |
+| :-------- | :--------------- | :------ | :---------------------------------------------------------------------------- |
+| left      | number or string | --      | Sets style.left of the tooltip container                                      |
+| top       | number or string | --      | Sets style.top of the tooltip container                                       |
+| className | string           | --      | Adds a class (in addition to `vx-tooltip-portal`) to the tooltip container    |
+| style     | object           | --      | Sets / overrides any styles on the tooltip container (including top and left) |
+| children  | node             | --      | Sets the children of the tooltip, i.e., the actual content                    |
+
+#### TooltipWithBounds
+
+This tooltip component is exactly the same as `Tooltip` above, but it is aware of its boundaries meaning that it will flip left/right and bottom/top based on whether it would overflow its parent's boundaries. It accepts the following props, and will spread any additional props on the Tooltip component (i.e., ...restProps):
+
+| Name        | Type   | Default | Description                                                                                                                                                                      |
+| :---------- | :----- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| left        | number | --      | The horizontal position of the cursor, tooltip will be place to the left or right of this coordinate depending on the width of the tooltip and the size of the parent container. |
+| top         | number | --      | The vertical position of the cursor, tooltip will be place to the bottom or top of this coordinate depending on the height of the tooltip and the size of the parent container.  |
+| offsetLeft  | number | 10      | Horizontal offset of the tooltip from the passed `left` value, functions as a horizontal padding.                                                                                |
+| offsetRight | number | 10      | Vertical offset of the tooltip from the passed `top` value, functions as a vertical padding.                                                                                     |
+| style       | object | --      | Sets / overrides any styles on the tooltip container (including top and left)                                                                                                    |
+| children    | node   | --      | Sets the children of the tooltip, i.e., the actual content                                                                                                                       |
+
+Note that this component is positioned using a `transform`, so overriding `left` and `top` via styles may have no effect.
+
+### Examples
+#### useTooltip For Functional Components
+
+```js
+import { useTooltip, TooltipWithBounds } from '@vx/tooltip';
+import { localPoint } from '@vx/event';
+
+const ChartWithTooltip = () => {
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip,
+  } = useTooltip();
+
+  const handleMouseOver = (event, datum) => {
+    const coords = localPoint(event.target.ownerSVGElement, event);
+    showTooltip({
+      tooltipLeft: coords.x,
+      tooltipTop: coords.y,
+      tooltipData: datum
+    });
+  };
+
+  return (
+    <>
+      <svg width={...} height={...}>
+        // Chart here...
+        <SomeChartElement
+          onMouseOver={this.handleMouseOver}
+          onMouseOut={hideTooltip}
+        />
+      </svg>
+
+      {tooltipOpen && (
+        <TooltipWithBounds
+          // set this to random so it correctly updates with parent bounds
+          key={Math.random()}
+          top={tooltipTop}
+          left={tooltipLeft}
+        >
+          Data value <strong>{tooltipData}</strong>
+        </TooltipWithBounds>
+      )}
+    </>
+  )
+};
+
+render(<ChartWithTooltip />, document.getElementById("root"));
+```
+
+#### withTooltip For Class Components
+
+```js
 import { withTooltip, TooltipWithBounds } from '@vx/tooltip';
@@ -63,48 +180,1 @@ import { localPoint } from '@vx/event';
 Example codesandbox [here](https://codesandbox.io/s/kw02m019mr).
-
-### Enhancers
-#### withTooltip(BaseComponent [, containerProps [, renderContainer]])
-If you would like to add tooltip state logic to your component, you may wrap it in `withTooltip(BaseComponent [, containerProps [, renderContainer])`.
-
-The HOC will wrap your component in a `div` with `relative` positioning by default and handle state for tooltip positioning, visibility, and content by injecting the following props into your `BaseComponent`:
-
-
-You may override the container by specifying `containerProps` as the second argument to `withTooltip`, or by specifying `renderContainer` as the third argument to `withTooltip`.
-
-| Name | Type | Description |
-|:---- |:---- |:----------- |
-| showTooltip | func | Call this function with the signature `func({ tooltipData, tooltipLeft, tooltipTop })` to set the tooltip state to the specified values.
-| hideTooltip | func | Call this function to close a tooltip, i.e., set the `showTooltip` state to `false`.
-| tooltipOpen | bool | Whether the tooltip state is open or closed |
-| tooltipLeft | number | The `tooltipLeft` position passed to the `showTooltip` func, intended to be used for tooltip positioning |
-| tooltipTop | number | The `tooltipTop` position passed to the `showTooltip` func, intended to be used for tooltip positioning |
-| tooltipData | any | The `tooltipData` value passed to the `showTooltip` func, intended to be used for any data that your tooltip might need to render |
-| updateTooltip | func | Call this function with the signature `func({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData })` to set the tooltip state to the specified values. |
-
-
-### Components
-#### Tooltip
-This is a simple Tooltip container component meant to be used to actually render a Tooltip. It accepts the following props, and will spread any additional props on the tooltip container div (i.e., ...restProps):
-
-| Name | Type | Default | Description |
-|:---- |:---- |:------- |:----------- |
-| left | number or string | -- | Sets style.left of the tooltip container
-| top | number or string | -- | Sets style.top of the tooltip container
-| className | string | -- | Adds a class (in addition to `vx-tooltip-portal`) to the tooltip container
-| style | object | -- | Sets / overrides any styles on the tooltip container (including top and left)
-| children | node | -- | Sets the children of the tooltip, i.e., the actual content
-
-
-#### TooltipWithBounds
-This tooltip component is exactly the same as `Tooltip` above, but it is aware of its boundaries meaning that it will flip left/right and bottom/top based on whether it would overflow its parent's boundaries. It accepts the following props, and will spread any additional props on the Tooltip component (i.e., ...restProps):
-
-| Name | Type | Default | Description |
-|:---- |:---- |:------- |:----------- |
-| left | number | -- | The horizontal position of the cursor, tooltip will be place to the left or right of this coordinate depending on the width of the tooltip and the size of the parent container.
-| top | number | -- | The vertical position of the cursor, tooltip will be place to the bottom or top of this coordinate depending on the height of the tooltip and the size of the parent container.
-| offsetLeft | number | 10 | Horizontal offset of the tooltip from the passed `left` value, functions as a horizontal padding.
-| offsetRight | number | 10 | Vertical offset of the tooltip from the passed `top` value, functions as a vertical padding.
-| style | object | -- | Sets / overrides any styles on the tooltip container (including top and left)
-| children | node | -- | Sets the children of the tooltip, i.e., the actual content
-
-Note that this component is positioned using a `transform`, so overriding `left` and `top` via styles may have no effect.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

23

increased by21.05%

Number of lines in readme file

179

increased by64.22%

Worsened metrics

Total package byte prevSize

37273

decreased by-4.78%

Lines of code

488

decreased by-10.62%

Dependency changes

• + Added@vx/bounds@0.0.195(transitive)

• - Removed@vx/bounds@0.0.194(transitive)

• Updated@vx/bounds@0.0.195