Captain hook

Overview

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.

Hooks

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

SOON...

---

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

SOON...

---

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

SOON...

---

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

SOON...

---

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

SOON...

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!