these are some custom hooks to help you not repeat yourself again, again and maybe again.
- useFetch
- useInput
- useForm
- useToggle
- useLocalStorage
- useSessionStorage
- useIndexedDB
- useDarkMode
- useStack
- useQueue
- useArray
- useGeoLocation
- useTimer
- useTimerCountDown
- useIsMounted
- useIsLoading
- useDocumentTitle
- useScript
- useCss
- useKeyPressed
- useWindowSize
- useOnHover
- usePosition
- useSpeak
- useSpeechRecognition
- useCopyToClipboard
- useCountUp
- useCountDown
npm i custom-hooks-react
useFetch uses the fetch api to make the process much easier and simpler when making api callls. useFetch returns, 3 attributes, data , error, loading
for get request just pass one param; the URL
import React from 'react'
import {useFetch} from 'custom-hooks-react'
export default function App() {
const URL = 'https://dog.ceo/api/breeds/image/random'
const [data, error, loading] = useFetch(URL)
console.log(data, error, loading)
return (
<div >
</div>
)
}
- URL - string
for post request pass in two params; URL & options
import React from 'react'
import './App.css'
import {useFetch} from 'custom-hooks-react'
export default function App() {
const [data, error, loading] = useFetch(URL, { answer: 42 })
console.log(data, error, loading)
return (
<div >
</div>
)
}
- URL - string
- options - object
no need to repeat youself updating the state why not let this package handle it for you.
useInput return 2 attributes, value & bind function. value holds the value of the state and bind hold the value and onChange function.
pass in the bind object
import React from 'react'
import './App.css'
import {useInput} from 'custom-hooks-react'
export default function App() {
const [firstName, firstNameBind, emptyLastName] = useInput('F Name')
const [lastName, lastNameBind, emptyLastName] = useInput('L Name')
return (
<div >
<input {...firstNameBind} type="text" />
<input {...lastNameBind} type="text" />
</div>
)
}
just the normal way but still better than the old way.
import React from 'react'
import './App.css'
import {useInput} from 'custom-hooks-react'
export default function App() {
const [firstName, firstNameBind] = useInput('F Name')
const [lastName, lastNameBind] = useInput('L Name')
return (
<div >
<input value={firstName} onChange={firstNameBind.onChange} type="text" />
<input value={lastName} onChange={lastNameBind.onChange} type="text" />
</div>
)
}
- value - string || number
useForm hook allows you to keep a record of input values from a form, you dont need to have a state for each input just this one hook is enough.
import React from "react";
import "./App.css";
import { useForm } from "custom-hooks-react";
export default function App() {
const handleSubmit = (e) => {
e.preventDefault();
console.log(values);
};
const [values, setValues] = useForm();
return (
<div>
<form onSubmit={handleSubmit}>
<input
value={values.firstName || ""}
onChange={setValues}
name="firstName"
type="text"
/>
<input
value={values.lastName || ""}
onChange={setValues}
name="lastName"
type="text"
/>
<input
value={values.age || ""}
onChange={setValues}
name="age"
type="text"
/>
<button type="submit">submit</button>
</form>
</div>
);
}
this hook values will return object with all input names and input values.
{firstName: "first", lastName: "last", age: "15"}
simple toggle hook, it will return true or false based on the set function. This hooks takes in a param; active. Active is Boolean. If no params are passed, then on default it is false
import React from 'react'
import './App.css'
import {useToggle} from 'custom-hooks-react'
export default function App() {
const [isOn, setIsOn] = useToggle()
return (
<div>
<button onClick={setIsOn}>{`i am ${isOn}`}</button>
</div>
)
}
- condition - boolean
this hooks lets you write to local storage and retrieve back from local storage within a minute. This hook returns 2 attributes; value & setValue. value hold the information retrieved from local storage and setValue lets you add to local storage.
import React from "react";
import "./App.css";
import { useInput, useLocalStorage } from "custom-hooks-react";
export default function App() {
// you can name the destructured attribute names to anything you like!
// for simplicity i have used value and setValue.
const [value, setValue] = useLocalStorage('key');
const [name, nameBind] = useInput('');
console.log(value);
const handleSubmit = (e) => {
e.preventDefault();
setValue(name);
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type='text' {...nameBind} />
<button type="submit">submit</button>
</form>
</div>
);
}
you can name the destructured attribute names to anything you like! for simplicity i have used value and setValue.
- key - string
this hooks lets you write to session storage and retrieve back from session storage within seconds. This hook returns 2 attributes; value & setValue. value hold the information retrieved from session storage and setValue lets you add to session storage.
import React from "react";
import "./App.css";
import { useInput, useSessionStorage } from "custom-hooks-react";
export default function App() {
const [value, setValue] = useSessionStorage('key');
const [name, nameBind] = useInput('');
console.log(value);
const handleSubmit = (e) => {
e.preventDefault();
setValue(name);
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type='text' {...nameBind} />
<button type="submit">submit</button>
</form>
</div>
);
}
- key - string
this hook lets you interact with indexedDB with much simplicity.
import React from "react";
import "./App.css";
import { useIndexedDB } from "custom-hooks-react";
export default function App() {
const [state, actions] = useIndexedDB("DB", "Table", "PrimaryKey");
console.log(state.error);
console.log(state.success);
// get all items in table
const getItems = async () => {
const items = await actions.getAll();
console.log(items);
};
// get all items in table
const getItem = async () => {
const item = await actions.getItem(2);
console.log(item);
};
return (
<div>
<button
onClick={() =>
actions.add({ myKey: Math.floor(Math.random() * 10), name: "dell" })
}
>
add
</button>
<button onClick={() => actions.removeItem(7)}>delete</button>
<button onClick={() => actions.updateItem({ myKey: 6, name: "hp" })}>
update
</button>
<button onClick={getItems}>getItem</button>
</div>
);
}
This hook takes 3 parameters => database name, table name and primary key.
This hook returns 2 elements => state and actions (you can name them anything when destructuring).
- error - status message
- success - status message
- getAll() - function
- no params
- getItem(primaryKey) - function
- primaryKey - string or number
- updateItem(new Object) - function
- new Object - updated values - object
- removeItem(primaryKey)
- primaryKey - string or number
- Database-Name - string
- Table-Name - string
- PrimaryKey - string or number (string is better choice)
this hooks makes the process much easier when you want your application to have night mode. JUST useDarkMode.
the hook takes 1 param; a boolean, on defualt it is false.
import React from "react";
import "./App.css";
import { useDarkMode } from "custom-hooks-react";
export default function App() {
const [mode, setMode] = useDarkMode(true);
return (
<div>
<button onClick={setMode}>{`i am ${mode}`}</button>
</div>
);
}
- MODE - boolean
ever needed stack? well you no longer need to go through the implementationd level, JUST useStack.
import React from "react";
import "./App.css";
import {useStack} from "custom-hooks-react";
export default function App() {
const [stack, setStack, popStack] = useStack();
return (
<div>
<button onClick={()=> setStack('hi')}>push</button>
<button onClick={()=> popStack()}>pop</button>
</div>
);
}
["hi", "hi", "hi", "hi", "hi", "hi", "hi", "hi"]
- initialState - array
need a queue? just useQueue.
import React from "react";
import "./App.css";
import {useQueue} from "custom-hooks-react";
export default function App() {
const [queue, enqueue, dequeue] = useQueue()
console.log(queue);
return (
<div>
<button onClick={()=> enqueue('hey')}>enqueue</button>
<button onClick={dequeue}>dequeue</button>
</div>
);
}
- initialState - array
using arrays with hooks can never be easier than this, this hook will handle the main functionalities for you. The hook take an array as paramter and returns an array with the array itself, setState and an object of functions.
import React, { useState } from "react";
import "./App.css";
import { useArray } from "custom-hooks-react";
export default function App() {
const [arr, setArr, actions] = useArray();
console.log(arr);
return (
<div>
<button onClick={() => actions.add(Math.floor(Math.random() * 20))}>
add
</button>
<button onClick={() => actions.removeAt(2)}>remove at 3</button>
</div>
);
}
- add() - add element to array.
- clear() - clears array
- removeById - removes by id - takes id as param
- removeAt - remove at an index - take index as param
- initialState - array
- removeById - id
- removeAt - index - number
to get the users location, then this is the hook for you. this hook returns an object containing latitude and longitude.
import React from "react";
import "./App.css";
import {useGeoLocation} from "custom-hooks-react";
export default function App() {
const [location, error] = useGeoLocation()
return (
<div>
<p>{`${location.latitude} / ${location.longitude}`}</p>
</div>
);
}
None
you need a timer, just useTimer. useTimer hook take 1 parameter and return two elements. The first element is the timer which is a string and second is an object with four routines (functions) that control the timer.
the functions that control the timer, in the object are:
- start()
- stop()
- resume()
- reset()
import React from "react";
import "./App.css";
import {useTimer} from "custom-hooks-react";
export default function App() {
const [timer, actions] = useTimer(60000);
return (
<div>
<p>{timer}</p>
<button onClick={actions.start}>start</button>
<button onClick={actions.stop}>stop</button>
<button onClick={actions.reset}>reset</button>
<button onClick={actions.resume}>resume</button>
</div>
);
}
- time in mili-seconds - number
- on default it is 0.
for simple yet complex countdown use this hook, you will save a lot of time. This hook take one parameter which is of type Date and returns an array with four elements; [days, hours, minutes, seconds].
import React from "react";
import "./App.css";
import { useTimerCountDown } from "custom-hooks-react";
export default function App() {
const [days, hours, minutes, seconds] = useTimerCountDown("September 1, 2021 00:00:00");
return (
<div>
<p>{`${days}:${hours}:${minutes}:${seconds}`}</p>
</div>
);
}
- full date (date and time) - date
if you want to check if your component has rendered use this hook. this hook returns a boolean.
import React from "react";
import "./App.css";
import {useIsMounted} from "custom-hooks-react";
export default function App() {
const isMounted = useIsMounted()
return (
<div>
<p>{`${isMounted}`}</p>
</div>
);
}
NONE
if you want to check the status of a function, then use this hook. This hook takes in an async function then returns an array which contains the function and loading status of the function.
import React, { useEffect } from "react";
import "./App.css";
import { useIsLoading } from "custom-hooks-react";
const delayFunction = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
export default function App() {
const fetchDevs = async () => {
console.log("this might take some Stime....");
await delayFunction(4000);
console.log("Done!");
};
const [getDevs, isLoading] = useIsLoading(fetchDevs);
useEffect(() => {
getDevs();
}, []);
return (
<div>
<p>{`${isLoading}`}</p>
</div>
);
}
- action - function
if you want to update the title of your react page dynamically this is your hook. in order to change the title, you will need to pass the title as parameter to the hook, it will return back the title stored in the useDocumentTitle state.
import React, { useState } from "react";
import "./App.css";
import { useDocumentTitle } from "custom-hooks-react";
export default function App() {
const [state, setstate] = useState(0);
const displayTitle = `clicked ${state}`;
const title = useDocumentTitle(displayTitle);
return (
<div>
<button onClick={() => setstate(state + 1)}>add</button>
</div>
);
}
- initialValue - string or number
this hook takes in a link to any script internal or external, then tries to load it. it will also return the status of loading process and append the script to the index.html
import React from "react";
import "./App.css";
import { useScript } from "custom-hooks-react";
export default function App() {
const status = useScript(
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"
);
console.log(status);
return <div>REACT</div>;
}
- src - string
this hook takes in a link to any css href internal or external, then tries to load it. it will also return the status of loading process and append the css href to the index.html
import React from "react";
import "./App.css";
import {useCss} from "custom-hooks-react";
export default function App() {
const status = useCss(
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap-grid.min.css"
);
console.log(status);
return <div>REACT</div>;
}
- src - string
this hook allow you to keep track of the keys that are pressed on the keyboard by the user.
import React from "react";
import "./App.css";
import { useKeyPressed } from "custom-hooks-react";
export default function App() {
const key = useKeyPressed("w");
const keyTwo = useKeyPressed("i");
const keyThree = useKeyPressed("n");
console.log(key);
console.log(keyTwo);
console.log(keyThree);
return <div>REACT</div>;
}
- src - string
- if you're checking for a number add it as a string not int; '1' or "1".
this hook returns the size of window as it resizes.
import React from "react";
import "./App.css";
import { useWindowSize } from "custom-hooks-react";
export default function App() {
const [height, width] = useWindowSize();
console.log({ height, width });
return <div>REACT</div>;
}
NONE
this hook returns if mouse is hovered on top of an element.
import React from "react";
import "./App.css";
import { useOnHover } from "custom-hooks-react";
export default function App() {
const [reference, status] = useOnHover();
console.log(status);
return (
<div>
<button
ref={reference}
style={{ backgroundColor: status ? "red" : "black" }}
>
submit
</button>
</div>
);
}
NONE
this hook returns the X and Y position of mouse click on an element. It returns an array with object which holds positionX & positionY and a function which trigers the position.
import React from "react";
import "./App.css";
import {usePosition} from "custom-hooks-react";
export default function App() {
const [position, handlePosition] = usePosition();
console.log(position);
return <div onClick={handlePosition}>REACT</div>;
}
NONE
this hook read out loud the text that is paased as parameter.
import React from "react";
import "./App.css";
import {useSpeak} from "custom-hooks-react";
export default function App() {
const [state, setState, speak] = useSpeak("hello how are you");
return <div onClick={() => speak()}>REACT</div>;
}
- text - string
this hook changes speech into text, simply talk into microphone and it will return the text. This hook returns an array with text & status & start function which starts the recognition.
import React from "react";
import "./App.css";
import {useSpeechRecognition} from "custom-hooks-react";
export default function App() {
const [state, status, start] = useSpeechRecognition();
return (
<>
<div onClick={() => start()}>START</div>
<p>{status ? status : state}</p>
</>
);
}
NONE
this hook allows you to copy text to clip board by inserting the text into the copy function as params.
import React from "react";
import "./App.css";
import {useCopyToClipboard} from "custom-hooks-react";
export default function App() {
const [text, copy] = useCopyToClipboard();
console.log(text);
return (
<>
<div onClick={() => copy("hello world")}>COPY</div>
</>
);
}
NONE
React JS hook to animate counting up to a given number from 0.
import { useCountUp } from "custom-hooks-react";
function App() {
const counter = useCountUp(500, 100)
return (
<div className="App">
<header className="App-header">
<p>{counter}</p>
</header>
</div>
)
}
- countUp number - number
- timer - miliseconds
- accumulater - number - [ default = 200 ]
React JS hook to animate counting down to 0 from a given number.
import { useCountDown } from "custom-hooks-react";
function App() {
const counter = useCountDown(500, 100,
return (
<div className="App">
<header className="App-header">
<p>{counter}</p>
</header>
</div>
)
}
- countUp number - number
- timer - miliseconds
- accumulater - number - [ default = 200 ]