Supercharge Your React Development
with Hookings

Simplify and Enhance your React Development Experience with a Collection of Custom Hooks

Get started

Why use Hookings ?

  • Ease to use

    Hooks with intuitive and easy-to-use APIs, providing a delightful development experience.

  • Customization

    Highly customizable options to adapt the hooks according to your specific needs.

  • Comprehensive Documentation

    Detailed and well-organized documentation to aid in learning and using the hooks.

  • Increased Productivity

    Reduce time spent on repetitive tasks with pre-built hooks.

  • Interactivity

    Empower the creation of interactive and dynamic user interfaces.

  • Optimized Performance

    Carefully implemented hooks to ensure efficient performance in your applications.

  • Code Clarity

    Well-structured and reusable hooks resulting in cleaner and organized code.

  • Wide Compatibility

    Compatible with various React versions, working in different development environments.

  • Growing Collection of Hooks

    The library is continually evolving with new hooks being added regularly.

useKeyDown

You can use the useKeyDown hook to handle arrow key navigation in your application. For example, let's implement a simple image gallery that allows users to navigate between images using the left and right arrow keys

Example

Press ArrowLeft or Ctrl + ArrowRight

Image 1
(image1.jpg)

useDebounce is used to set a delay for changing images

useKeyDown Docs
ImageGallery.tsx
import { useState } from "react";
import * from "hookings";
 
const ImageGallery = () => {
	const [currentImage, setCurrentImage] = useState<number>(0);
	const [block, setBlock] = useState<boolean>(false);
	const images: string[] = ["image1.jpg", "image2.jpg", "image3.jpg"];
 
    const handleLeftArrow = () => {
    	if (!block) {
    		setCurrentImage((prevImage) =>
    			prevImage > 0 ? prevImage - 1 : images.length - 1
    		);
    		setBlock(true);
    	};
    };
 
    const handleRightArrow = () => {
    	if (!block) {
    		setCurrentImage((prevImage) =>
    			prevImage < images.length - 1 ? prevImage + 1 : 0
    		);
    		setBlock(true);
    	};
    };
 
    // Handle left arrow key press
    hookings.useKeyDown("ArrowLeft", handleLeftArrow);
 
    // Handle right arrow + ctrl key press
    hookings.useKeyDown("ArrowRight", handleRightArrow, { ctrlKey: true });
 
    // Delay to change images
    hookings.useDebounce(
    	() => {
    		setBlock(false);
    	},
    	300,
    	[currentImage]
    );
 
    return <img src={images[currentImage]} alt={`Image ${currentImage + 1}`} />;
};