Welcome to the Practical Utils and Hooks repository! This repository contains a collection of practical utility functions and custom React hooks developed solely by me for personal use.
The purpose of this repository is to provide simple and focused solutions for common tasks encountered in web development. Instead of relying on libraries with numerous features, the utilities and hooks included here aim to address specific needs efficiently.
Below are the utilities and hooks included in this repository:
- exportPdf Function: A function to export the content of an HTML element as a PDF file.
- useSwipe Hook: A custom React hook for enabling swipe functionality within a container element.
- useInView Hook: A custom React hook leveraging the Intersection Observer API to detect when an element becomes visible in the viewport.
All utilities and hooks provided in this repository are open for anyone to use and customize according to their requirements. They are designed to be lightweight and easy to integrate into any project.
While these utilities and hooks are primarily developed for personal use, contributions are welcome! Feel free to suggest improvements, report issues, or submit new utilities and hooks that you find useful.
This repository is licensed under the MIT License. Feel free to use the code in your own projects, modify it as needed, and share it with others.
The exportPdf function is designed to export the content of an HTML element as a PDF file.
The useSwipe hook is a custom React hook for enabling swipe functionality within a container element. It allows users to swipe horizontally within the container to scroll its content.
The useInView hook uses the Intersection Observer API to efficiently detect when an element becomes visible within the viewport. This can be particularly useful for triggering animations, loading content lazily, or executing any other action that depends on the visibility of elements.
The useMouseSide hook is a custom React hook designed to determine which side (left or right) of a specified element the mouse is currently hovering over. By utilizing this hook, developers can easily implement dynamic UI/UX effects based on the mouse's position relative to an element. This could include visual feedback, animations, or other interactive elements. The hook provides a simple and efficient way to enhance user interaction within your application.