ali-sabry

import { useState, useEffect } from "react";
import { initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

const firebaseConfig = {
  //... Your config object here
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

ali-sabry

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

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

//=== 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

import { useState, useEffect } from 'react';

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

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

ali-sabry

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

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

  useEffect(() => {
    let idleTimer;

    const resetIdleTimer = () => {

ali-sabry

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

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

//=== 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

import { useState, useEffect } from 'react';

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

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