@hhgtech/hooks

Hello Health Group's Custom Hooks for React.

Installation

You can install this plugin using npm or yarn:

npm install @hhgtech/hooks

or

yarn add @hhgtech/hooks

Hooks

useAppHeight

This hook set app height to css variable --app-height

Usage:

import { useAppHeight } from '@hhgtech/hooks';

const App = () => {
  const appHeight = useAppHeight();

  return (
    <div style={{ height: 'var(--app-height, 100vh)' }}>
      {/* ... */}
    </div>
  );
};

useDragScroll

A hook that enables horizontal scrolling of a container element by dragging with the mouse.

Returns:

An object containing the following properties:

• sliding: A boolean indicating whether the user is currently dragging the container.
• mouseDownHandler: A function to be attached to the onMouseDown event of the container element.
• sliderRef: A ref to the container element.
• pos: A ref to an object containing the initial position of the mouse and the container when click on container.

Usage:

  const { sliding, mouseDownHandler, sliderRef } = useDragScroll();
  return (
    <div ref={sliderRef} onMouseDown={mouseDownHandler}>
      {sliding ? 'Dragging...' : 'Not dragging.'}
    </div>
  );

useIsMobile

A hook that returns a boolean indicating whether the current device is mobile or not.

Parameters:

isMobileSsr - A boolean indicating whether the device is mobile on server-side rendering.

Returns:

A boolean indicating whether the current device is mobile or not.

Usage:

const isMobile = useGetIsMobile(false);
console.log(isMobile); // false

License

This project is licensed under the MIT License - see the LICENSE file for details.