React DOM Hooks

A collection of React Hooks carrying complex JavaScript queries for handling awesome DOM events. The package is written in TypeScript to support all modern needs.

About

React DOM Hooks provides a set of UI functionalities that makes it a UI supporting library. APIs provided by each hook can be connected to any UI element. This makes achieving complex UI functionalities easier without restricting the idea to a particular design making it totally unopinionated.

Attention

React DOM Hooks manipulates the DOM. Hooks provided in this package work on HTML IDs and classes more than React refs. If you are facing major performance issues after using any of the provided hooks from this package, we would recommend you to switch to a different library or package. But in most cases, this does not impact the performance at all. All the hooks available in this package got tested on multiple applications of different sizes and proficiency levels.

Getting started

npm install react-dom-hooks

List of Hooks

useHorizontalScroll

import {useHorizontalScroll} from "react-dom-hooks"

useHorizontalScroll Props

| Name | Type | Description |
|:----------|:-------------|:-------------------------| | containerId | string | Unique ID of the container |

useHorizontalScroll Handlers and Options

| Name | Type | Description |
|:----------|:-------------|:-------------------------| | handleScroll | function | Takes scroll direction as "left" or "right" |

Demo for useHorizontalScroll

useVerticalScroll

import {useVerticalScroll} from "react-dom-hooks"

useVerticalScroll Props

| Name | Type | Description |
|:----------|:-------------|:-------------------------| | containerId | string | Unique ID of the container |

useVerticalScroll Handlers and Options

| Name | Type | Description |
|:----------|:-------------|:-------------------------| | handleScroll | function | Takes scroll direction as "up" or "down" |

Demo for useVerticalScroll

useHorizontalAutoLoopScroll

import {useHorizontalAutoLoopScroll} from "react-dom-hooks"

useHorizontalAutoLoopScroll Props

| Name | Type | Description |
|:----------|:-------------|:-------------------------| | containerId | string | Unique ID of the parent container | | childClass | string | Class assigned to all the children | | loopSpeed | number (optional) | Unique ID of the container |

useHorizontalAutoLoopScroll Handlers and Options

| Name | Type | Description |
|:----------|:-------------|:-------------------------| | pauseLoop | function | Pauses the loop | | resumeLoop | function | Resumes the loop |

Demo for useHorizontalAutoLoopScroll

useCarousel

import {useCarousel} from "react-dom-hooks"

useCarousel Props

| Name | Type | Description |
|:----------|:-------------|:-------------------------| | containerRef | React.RefObject < HTMLDivElement > | ref to the parent container | | loop | boolean (optional) | Loop slides on reaching the end |

useCarousel Handlers and Options

| Name | Type | Description |
|:----------|:-------------|:-------------------------| | totalSlides | number | Total number of slides | | activeSlide | number | Indexed to 1 | | changeSlide | function | Takes direction as "prev" or "next" |

Demo for useCarousel

useHorizontalAutoSnapScroll

import {useHorizontalAutoSnapScroll} from "react-dom-hooks"

useHorizontalAutoSnapScroll Props

| Name | Type | Description | | :----------- | :----- | :--------------------------------------------------------- | | scrollLeftBy | number | Should match (approximately) with the child width | | snapDelay | number | (in ms), i.e. 2000 = 2 seconds. Controls auto-scroll delay |

useHorizontalAutoSnapScroll Handlers and Options

| Name | Type | Description | | :----------- | :--------------------------------------------- | :-------------------------------------------- | | containerRef | React.MutableRefObject<HTMLDivElement | null> | ref to be applied on the scrollable container |

Demo for useHorizontalAutoSnapScroll