React Custom Hooks provide an efficient means to encapsulate and share logic among components within React applications. This package includes useful React custom hooks.
- Installation
- Browser Support
- useKeyboard
- useRandomArray
- useCurrentLocation
- useScroll
- useNotification
- License
- Author
You can install the package using npm:
npm install react-mkx-toolkit
Or using yarn:
yarn add react-mkx-toolkit
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.
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;
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.
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;
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.
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;
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.
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;
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.
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;
Call the requestPermission
function to request permission from the user before showing notifications.
- requestPermission: A function to request permission for displaying notifications.
- showNotification: A function to display notifications with the given title and options.
- notificationPermission: The current notification permission state (granted, denied, or default).
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
This project is licensed under the MIT License - see the LICENSE file for details.