Here a modest list of hooks that I use every day. I will add more 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
SOON...
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"}
SOON...
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 />}
SOON...
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...
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!