iamwelk / captain-hook

Modest list of hooks that I use every day.

Captain hook

Overview

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.

Hooks

useFetch - View code

Useful hook if you want to fetch data.

How to use

Import hook :

import useFetch from "hooks/useFetch";

Then use like this :

const { response, errors } = useFetch("https://github.com/stevenpersia/");

Demo

View in CodeSandbox

---

useFullScreen - View code

Useful hook if you want to fullscreen an element of your page.

How to use

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);

Demo

View in CodeSandbox

---

useHover - View code

Useful hook if you want to detect when the mouse is hovering an element.

How to use

Import hook :

import useHover from "hooks/useHover";

Add :

const [hoverRef, isHovered] = useHover();

Then use like this :

<div ref={hoverRef}>{isHovered ? "Hovered !" : "Hover me !"}</div>

Demo

View in CodeSandbox

---

useKeyPress - View code

Useful hook if you want to detect when user is pressing a specific key.

How to use

Import hook :

import useKeyPress from "hooks/useKeyPress";

Then use like this :

const hKeyPressed = useKeyPress("h");

console.log(hKeyPressed && "Hello !");
// → Hello !

Demo

View in CodeSandbox

---

useSlug - View code

Useful hook if you want to slug content for urls.

How to use

Import hook :

import useSlug from "hooks/useSlug";

Then use like this :

useSlug("Omégà! Pèlô Fùll");
// → omega-pelo-full

Demo

View in CodeSandbox

---

useSwap - View code

Useful hook if you want to swap the keys and values of a given object.

How to use

Import hook :

import useSwap from "hooks/useSwap";

Then use like this :

useSwap({ name: "A", init: "bootstrap" });
// → {A: "name", bootstrap: "init"}

Demo

View in CodeSandbox

---

useTitle - View code

Useful hook if you want to set a specific title to page.

How to use

Import hook :

import useTitle from "hooks/useTitle";

Then use like this :

useTitle("My title");

Demo

View in CodeSandbox

---

useToggle - View code

Useful hook if you want display/hide something with toggle.

How to use

Import hook :

import useToggle from "hooks/useToggle";

Then use like this :

const [open, toggle] = useToggle(false);

<Button onClick={toggle}>Show filters</Button>;

{
	open && <Filters />;
}

Demo

View in CodeSandbox

---

useEventListener - View code

Useful hook if you want to create an event handler.

How to use

Import hook :

import useEventListener from "hooks/useEventListener";

Then use like this :

const [coords, setCoords] = useState({ x: 0, y: 0 });

useEventListener("mousemove", ({ clientX, clientY }) =>
	setCoords({ x: clientX, y: clientY })
);

console.log(coords);

Demo

View in CodeSandbox

---

useInfiniteScroll - View code

Useful hook if you want to add the infinite scroll feature to your website.

How to use

Import hook :

import useInfiniteScroll from "hooks/useInfiniteScroll";

Then use like this :

const [isFetching, setIsFetching] = useInfiniteScroll(fetchData);

const fetchData = () => {
	// ...
};

Demo

View in CodeSandbox

---

useFavicon - View code

Useful hook if you want to set a specific favicon to the page.

How to use

Import hook :

import useFavicon from "hooks/useFavicon";

Then use like this :

useFavicon("/path/image.png", "image/png");

Demo

View in CodeSandbox

---

Star, Fork, Clone & Contribute

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!