ali-sabry’s gists

ali-sabry / IntersectionObserver.js

Last active April 5, 2023 04:48

The useIntersectionObserver react custom Hook enables detection of an element's visibility on the screen, allowing for lazy loading of content like images, improving page load times and performance.

	//=== Craete The Custom Hook
	import { useState, useEffect } from 'react';

	const useIntersectionObserver = (ref, options) => {
	const [isIntersecting, setIsIntersecting] = useState(false);

	useEffect(() => {
	const observer = new IntersectionObserver(([entry]) => {
	setIsIntersecting(entry.isIntersecting);
	}, options);

ali-sabry / useDebounce.js

Created March 25, 2023 20:07

This hook will allow me to debounce any function that I want to run after a certain delay. For example, if I have an input field that triggers a search function on every keystroke, this hook will prevent unnecessary API calls by delaying the search function until the user stops typing for a certain period.

	import { useState, useEffect } from 'react';

	export const useDebounce = (value, delay) => {
	const [debouncedValue, setDebouncedValue] = useState(value);

	useEffect(() => {
	const timer = setTimeout(() => {
	setDebouncedValue(value);
	}, delay);

ali-sabry / useMediaQuery.js

Created March 26, 2023 13:34

This custom hook will allow me to easily check if the current screen size matches a specific media query (e.g., desktop or mobile). By using this hook, I can conditionally render components based on the screen size and optimize my app for different devices.

	//=== Custom Hook useMediaQuery
	import { useState, useEffect } from 'react';

	export const useMediaQuery = (query) => {
	const [matches, setMatches] = useState(false);

	useEffect(() => {
	const mediaQuery = window.matchMedia(query);
	/* window.matchMedia() match if the media query you passed
	is match with current media query and return boolean value

ali-sabry / useFormValidation.js

Created March 27, 2023 14:03

This custom hook allows you to easily handle form validation in your React application. It takes in an initial state and a validation function as parameters and returns an object with several properties and functions that can be used to manage the form state.

	import { useState, useEffect } from 'react';

	const useFormValidation = (initialState, validate) => {
	const [values, setValues] = useState(initialState);
	const [errors, setErrors] = useState({});
	const [isSubmitting, setIsSubmitting] = useState(false);

	useEffect(() => {
	if (isSubmitting) {
	const noErrors = Object.keys(errors).length === 0;

ali-sabry / useStorage.js

Created April 3, 2023 15:38

This custom hook can used to manage the local and session storage and save your data such as simple string or object this hook provides a simple way to persist data across page refreshes or even between different sessions. It's a useful tool for building web applications that need to remember user preferences or other stateful information.

	import { useEffect, useState } from 'react';

	const useStorage = (key, initialValue, storageType) => {

	let targetStorage;

	/* check if the `window` object is available before using it, or to provide a fallback storage mechanism for server-
	side rendering. */

	if (typeof window !== 'undefined') {

ali-sabry / useIdleTimer.js

Created April 5, 2023 16:07

useIdleTimer custom hook: This hook provides a way to detect when the user has been idle (not interacting with the app) for a certain amount of time. It can be useful for triggering automatic logouts or other actions after a period of inactivity.

	//=== Custom Hook useIdleTimer
	import { useEffect, useState } from 'react';

	const useIdleTimer = (timeIdleMS) => {
	const [isIdle, setIsIdle] = useState(false);

	useEffect(() => {
	let idleTimer;

	const resetIdleTimer = () => {

ali-sabry / useGeolocation.js

Created April 8, 2023 17:21

This custom hook will allows you to get the user's current location, which can be useful for location-based features in your app, without any third part library.

	import { useState, useEffect } from 'react';

	const useGeolocation = () => {
	const [location, setLocation] = useState({
	loaded: false,
	coordinates: { latitude: '', longitude: '' },
	});

	const onSuccess = (location) => {
	setLocation({

ali-sabry / useOfflineFirst.js

Created April 27, 2023 15:36

useOfflineFirst custom hook: this hook allows you to build offline-first apps which means apps that can work with or without an Internet connection, to provide a fast and reliable user experience and they are especially useful for scenarios where the network is unreliable or unavailable.

	//=== Custom Hook
	import React, { useState, useEffect } from "react";

	function useOfflineFirst(url) {
	const [isOnline, setIsOnline] = useState(true);
	const [data, setData] = useState(null);

	const updateNetworkStatus = () => {
	if (typeof navigator !== "undefined" && typeof navigator.onLine === "boolean") setIsOnline(navigator.onLine);
	};

ali-sabry / useRandomColorScheme.js

Created May 14, 2023 21:12

This custom hook is called useRandomColorScheme and it generates random color schemes for UI elements based on user preferences.

	import { useState, useEffect } from "react";

	const getRandomColor = () => {
	const getRandomNumber = () => Math.floor(Math.random() * 256);
	const toHex = (number) => number.toString(16).padStart(2, "0");
	return `#${toHex(getRandomNumber())}${toHex(getRandomNumber())}${toHex(
	getRandomNumber()
	)}`;
	};

ali-sabry / useSpeechRecognition.js

Created May 22, 2023 13:09

this hook allows users to control the application with voice commands.

	import { useState, useEffect } from "react";

	function useSpeechRecognition(commands, callback) {
	const [recognition, setRecognition] = useState(null);
	const [transcript, setTranscript] = useState("");
	const [error, setError] = useState("");
	const [status, setStatus] = useState("idle");

	// define an effect that runs once when the component mounts
	useEffect(() => {

Ali Sabry ali-sabry