mfaridzia / captain-hook

Modest list of hooks that I use every day.

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

useFetch - View code

Useful hook if you want to fetch data from a url.

How to use

Import hook :

import useFetch from "hooks/useFetch";

Then use like this :

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

Demo

SOON...

---

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...

---

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

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...

---

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

SOON...

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 :

useEventListener('DOMContentLoaded', event => {
   console.log('DOM fully loaded and parsed');
});

Demo

SOON...

---

useFocusOutside - View code

Useful hook if you want some element to close or hide when it lost focus from the user.

How to use

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.

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!