react-mkx-toolkit - npm Package Compare versions

Comparing version 1.7.7 to 1.7.8

package.json

 {
   "name": "react-mkx-toolkit",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "description": "React Custom Hooks provide an efficient means to encapsulate and share logic among components within React applications. This package includes useful React custom hooks.",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

useCurrentLocation/index.ts

@@ -5,8 +5,5 @@ import { useEffect, useState } from "react";
 /**
- * Represents a location object.
- * @interface
- * @property {number} latitude - The latitude coordinate.
- * @property {number} longitude - The longitude coordinate.
- * @property {object} address - Address information associated with the location.
- * @property {string} display_name - A human-readable representation of the location.
+ * ## useCurrentLocation
+ * The `useCurrentLocation` 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
  * @example
@@ -13,0 +10,0 @@ * import { useCurrentLocation } from "react-mkx-toolkit";

useKeyboard/index.ts

@@ -5,6 +5,8 @@ import { useEffect, useCallback } from "react";
 /**
- * Custom hook to handle keyboard events.
- * @param {KeyType} key - The key to listen for.
- * @param {Function} callback - The callback function to execute when the key is pressed.
- * @returns {void}
+ * ## 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
  * @example
@@ -21,4 +23,6 @@ * import { useKeyboard } from "react-mkx-toolkit";
  * };
+ *
  * export default MyComponent;
  */
+
 const useKeyboard = (key: KeyType, callback: Function): void => {
@@ -25,0 +29,0 @@ const handleKeyDown = useCallback(

useNotification/index.ts

@@ -0,13 +1,47 @@
+import { useState } from "react";
 import { NotificationOptions } from "./index.d";
-import { useState } from "react";
 
 /**
- * Custom hook for managing browser notifications.
- * @returns {{
- *   requestPermission: () => void,
- *   showNotification: (title: string, options?: NotificationOptions) => void,
- *   notificationPermission: NotificationPermission
- * }} Object containing functions to request and display notifications, and the current notification permission state.
+ * ## useNotification
+ * The `useNotification` hook simplifies the process of working with browser notifications in React applications.
+ * It provides a clean and intuitive interface for requesting permission and displaying notifications.
+ *  ## Return
+ * Return Object containing functions to request and display notifications, and the current notification permission state.
+ *  ## Usage
+ * @example
+ * import { useNotification } from "react-mkx-toolkit";
+ *
+ * const MyComponent = () => {
+ *   const { requestPermission, showNotification, notificationPermission } =
+ *     useNotification();
+ *
+ *   const handleClick = () => {
+ *     showNotification("Hello!", {
+ *       body: "This is a notification from your web app.",
+ *       icon: "path/to/your/icon.png",
+ *     });
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={requestPermission}>Request Permission</button>
+ *       <button
+ *         onClick={handleClick}
+ *         disabled={notificationPermission !== "granted"}
+ *       >
+ *         Show Notification
+ *       </button>
+ *     </div>
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ *
  */
-const useNotification = () => {
+
+const useNotification = (): {
+  requestPermission: () => void;
+  showNotification: (title: string, options?: NotificationOptions) => void;
+  notificationPermission: NotificationPermission;
+} => {
   const [notificationPermission, setNotificationPermission] =
@@ -14,0 +48,0 @@ useState<NotificationPermission>(

useRandomArray/index.ts

 /**
- * Generates an array of numbers in increasing order with a specified start and end value.
- * @param start - The starting value of the array.
- * @param end - The ending value of the array (exclusive).
- * @returns The array of numbers in increasing order.
+ * ## useRandomArray
+ *
+ * The `useRandomArray` 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
+ *
+ * @example
+ * 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;
  */
+
 const useRandomArray = (start: number, end: number): number[] => {
@@ -8,0 +22,0 @@ return Array.from({ length: end - start }, (_, i) => start + i);

useScroll/index.ts

 import { ScrollOptionsProps, useScrollProps } from "./index.d";
+
 /**
- * Hook to provide scrolling utilities.
- * @returns {useScrollProps} An object containing functions for scrolling.
+ * ## 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.
+ *
+ * ## Usage
+ * @example
+ * 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;
  */
 
-/**
- * Hook to provide scrolling utilities.
- * @returns {useScrollProps} An object containing functions for scrolling.
- */
 function useScroll(): useScrollProps {
@@ -12,0 +46,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

35395

increased by6.99%

Lines of code

657

increased by13.86%

No dependency changes