react-mkx-toolkit

React Custom Hooks

React Custom Hooks provide an efficient means to encapsulate and share logic among components within React applications. This package includes useful React custom hooks.

Table of Contents

• Installation
• Browser Support
• useKeyboard
• useRandomArray
• useCurrentLocation
• useScroll
• License
• Author

Installation

You can install the package using npm:

npm install react-mkx-toolkit

Or using yarn:

yarn add react-mkx-toolkit

useKeyboard

The useKeyboard hook is a custom React hook designed to simplify the handling of keyboard events within your React applications. With this hook, you can easily listen for specific keyboard inputs and execute callback functions in response to those inputs.

Usage

import { useKeyboard } from "react-mkx-toolkit";

const MyComponent = () => {
  const handleKeyPress = () => {
    console.log("The Enter key was pressed!");
  };

  useKeyboard("Enter", handleKeyPress);
  return <>MyComponent</>;
};
export default MyComponent;

useRandomArray

This hook is useful for scenarios where you need to generate a sequence of numbers within a specified range, such as creating test data, generating random values, or iterating through a range of numerical values.

Usage

import { useRandomArray } from "react-mkx-toolkit";

const MyComponent = () => {
  const arr = useRandomArray(0, 10);
  //Output : [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
  return <>MyComponent</>;
};
export default MyComponent;

useCurrentLocation

A hook to retrieve the current geographic location of the user. This hook is useful for scenarios where you need to access the user's current location for various purposes such as location-based services, mapping applications, or any feature requiring the user's geographical coordinates.

Usage

import { useCurrentLocation } from "react-mkx-toolkit";

const MyComponent = () => {
  const { display_name, address, latitude, longitude } = useCurrentLocation();

  return (
    <div>
      <p>
        <span>Display Name : </span>
        <span>{display_name}</span>
      </p>
      <p>
        <span>Latitude : </span>
        <span>{latitude}</span>
      </p>
      <p>
        <span>Longitude : </span>
        <span>{longitude}</span>
      </p>
      <p>
        <span>Address : </span>
        <span>{JSON.stringify(address)}</span>
      </p>
    </div>
  );
};
export default MyComponent;

useScroll

The useScroll hook is a custom React hook designed to provide a set of utilities for scrolling within a web application. Its main purpose is to encapsulate common scrolling functionality, making it easier to manage and reuse scrolling behavior across different components.

Here's a description of its key features and use cases:

• Scrolling to Top: The scrollToTop function provided by the useScroll hook allows you to scroll the window or scrollable container to the top. This is useful for scenarios where you need to programmatically scroll to the beginning of a page or a container.

• Scrolling to Bottom: The scrollToBottom function enables scrolling the window or container to the bottom. This is helpful for situations where you want to navigate to the end of a long page or content area.

• Scrolling to Specific Element: The scrollToId function allows you to scroll to a specific element within the document or a container by its ID. This is particularly useful for implementing smooth scrolling navigation or dynamically scrolling to specific sections or components within a page.

• Customizable Options: The scrollToId function supports customizable options such as scroll behavior, block alignment, and inline alignment. This allows you to fine-tune the scrolling behavior based on your specific requirements.

• Overall, the useScroll hook simplifies the implementation of scrolling functionality in React components by providing a reusable set of functions that cover common scrolling use cases. It promotes code reusability, maintainability, and improves the overall developer experience when working with scrolling behavior in React applications.

Usage

import React from "react";
import { useScroll } from "react-mkx-toolkit";

function ScrollComponent() {
  const { scrollToTop, scrollToBottom, scrollById } = useScroll();

  const handleScrollToTop = () => {
    scrollToTop();
  };

  const handleScrollToBottom = () => {
    scrollToBottom();
  };

  const handleScrollById = () => {
    scrollById("myElementId", {
      behavior: "smooth",
      block: "start",
      inline: "nearest",
    });
  };

  return (
    <div>
      <button onClick={handleScrollToTop}>Scroll to Top</button>
      <button onClick={handleScrollToBottom}>Scroll to Bottom</button>
      <button onClick={handleScrollById}>Scroll to Element with ID</button>
      <div id="myElementId">Element to scroll to</div>
    </div>
  );
}

export default ScrollComponent;

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

License

This project is licensed under the ISC License.

Author

Mani Kant Sharma