Here is a modest list of hooks that I use every day. I will add more in the next few days, keep watching. And if you have some good hooks I would love to add them. So feel free to open a pull request.
useFetch
- View code
Useful hook if you want to fetch data from a url.
Import hook :
import useFetch from "hooks/useFetch";
Then use like this :
const { response, errors } = useFetch("https://github.com/stevenpersia/");
SOON...
useFullscreen
- View code
Useful hook if you want to fullscreen an element of your page.
Import hook :
import useFullscreen from "hooks/useFullscreen";
Add :
const { elementFS, triggerFS, exitFS, isFS } = useFullscreen();
Then use like this :
<div ref="{elementFS}">I want to fullscreen this div.</div>
<button onClick="{triggerFS}">Trigger fullscreen</button>
<button onClick="{exitFS}">Exit fullscreen</button>
Check if fullscreen is triggered :
console.log(isFS);
SOON...
useHover
- View code
Useful hook if you want to detect when the mouse is hovering an element.
Import hook :
import useHover from "hooks/useHover";
Add :
const [hoverRef, isHovered] = useHover();
Then use like this :
<div ref="{hoverRef}">{isHovered ? "Hovered !" : "Hover me !"}</div>
SOON...
useKeyPress
- View code
Useful hook if you want to detect when user is pressing a specific key.
Import hook :
import useKeyPress from "hooks/useKeyPress";
Then use like this :
const hKeyPressed = useKeyPress("h");
console.log(hKeyPressed & "Hello !");
// → Hello !
SOON...
useSlug
- View code
Useful hook if you want to slug content for urls.
Import hook :
import useSlug from "hooks/useSlug";
Then use like this :
useSlug("Omégà! Pèlô Fùll");
// → omega-pelo-full
useSwap
- View code
Useful hook if you want to swap the keys and values of a given object.
Import hook :
import useSwap from "hooks/useSwap";
Then use like this :
useSwap({ name: "A", init: "bootstrap" });
// → {A: "name", bootstrap: "init"}
useTitle
- View code
Useful hook if you want to set a specific title to page.
Import hook :
import useTitle from "hooks/useTitle";
Then use like this :
useTitle("My title");
SOON...
useToggle
- View code
Useful hook if you want display/hide something with toggle.
Import hook :
import useToggle from "hooks/useToggle";
Then use like this :
const [open, toggle] = useToggle(false);
<Button onClick={toggle}>Show filters</Button>;
{open && <Filters />}
useEventListener
- View code
Useful hook if you want to create an event handler.
Import hook :
import { useEventListener } from "hooks/useEventListener";
Then use like this :
useEventListener('DOMContentLoaded', event => {
console.log('DOM fully loaded and parsed');
});
SOON...
useFocusOutside
- View code
Useful hook if you want some element to close or hide when it lost focus from the user.
Import hook :
import { useFocusOutside } from "hooks/useFocusOutside";
Then use like this :
const ref = useRef(null);
const closeOrHide = () => {
// some code to close or hide your element.
}
useFocusOutside(ref, closeOrHide);
Note: you need to pass ref into the element that should be focussed outside of.
SOON...
useInfiniteScroll
- View code
Useful hook if you want to add the infinite scroll feature to your website.
Import hook :
import useInfiniteScroll from "hooks/useInfiniteScroll";
Then use like this :
const [isFetching, setIsFetching] = useInfiniteScroll(fetchMoreListItems);
function fetchMoreListItems() {
// Some code for adding content to each user is at the bottom of the page
}
SOON...
useFavicon
- View code
Useful hook if you want to set a specific favicon to the page.
Import hook :
import useFavicon from "hooks/useFavicon";
Then use like this :
useFavicon("/path/image.png","image/png");
result :
<link rel="icon" type="image/png" href="/path/image.png">
SOON...
Feel free to contribute on this repository. If my work helps you, please give me back with a star. This means a lot to me and keeps me going!