hooks-me

React useful hooks.

yarn add hooks-me

---

useArray

Easy way to manage array as state. You can pass any Type you want as T.

usage

import { useArray } from "hooks-me";

const Component = () => {
  const { value, push, clear } = useArray<number>(DEFAULT_VALUE);

  return (
    <>
      <div>Value: {value.join(" - ")}</div>
      <button onClick={() => push(7)}>Add 7</button>
      <button onClick={clear}>Clear</button>
    </>
  );
};

API

name	description	usage
value	The value as array of T	-
push	Push a new value to the end of the current array of T	push(7)
clear	Clear all items. Value will be []	clear()
filter	Filter items	filter((id) => id < 5)
remove	Remove an item with its index	remove(9)
set	Set the value of array	set([1, 4, 7])
update	Replace an item	update(0, 12)

useEffectOnce

It's simply an upgraded version of the useEffect. You don't have to pass any dependencies as second argument. Only your logic is needed. Voila.

usage

import { useEffectOnce } from "hooks-me";

const Component = () => {
  useEffectOnce(() => {
    doJobOnce();
  });

  return <div>Hooks me, I'm famous.</div>;
};

useToggle

Act like useState to provide:

• the current value as boolean
• a setter with one non-mandatory argument

Simple usage:

• toggleValue(true); -> sets the value to true
• toggleValue(false); -> sets the value to false
• toggleValue(); -> sets the value as the opposite of the actual value (t'as compris)

usage

import { useToggle } from "hooks-me";

const Component = () => {
  const [value, toggleValue] = useToggle();

  return (
    <>
      <div>Hooks me, I'm {value ? "very" : "not"} famous.</div>
      <button onClick={() => toggleValue()}>Toggle</button>
      <button onClick={() => toggleValue(true)}>Set true</button>
      <button onClick={() => toggleValue(false)}>Set false</button>
    </>
  );
};

useValidatedState

Pimped version of the useState. It's the same behaviour (current value + setter), but you have to provide a second argument to the hook: the validator.

Validator is just.. a method with only one argument that returns a boolean value. The first argument is of the same type as you defined the hook.

usage

import { useValidatedState } from "hooks-me";

const checkIfValueIsValid = (value: string): boolean => {
  return value !== "famous";
};

const Component = () => {
  const [name, setName, nameIsValid] = useValidatedState<string>(
    "famous",
    checkIfValueIsValid
  );

  return (
    <>
      <div>Hooks me, I'm {name}.</div>
      <div>Is valid: {nameIsValid ? "probably" : "not sure"}</div>
      <button onClick={() => setName("famous")}>Famous</button>
      <button onClick={() => setName("very famous")}>Very famous</button>
    </>
  );
};

useDebounce

Simply add debounce feature for each situation. I guess hope. First thing you'll have to do, is to write you logic as first argument. Second argument is the delay in ms. Last one is the magic one. It's the list of variable which will trigger the debounce stuff. That's all!

usage

import { useState } from "react";
import { useDebounce } from "hooks-me";

const Component = () => {
  const [count, setCount] = useState(0);
  useDebounce(() => alert("Hooks me, bro."), 1000, [count]);

  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount((old) => old + 1)}>Add</button>
    </>
  );
};

useDebug

Debug your app with this amazing hook. You'll be able to find how many times the wanted component has been updated and see all props that changed during previous rendering.

Let's see following example.

usage

import { useState, type FC } from "react";
import { useDebug } from "hooks-me";

const Component: FC = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <ChildComponent count={count} />
      <button onClick={() => setCount((old) => old + 1)}>Add</button>
    </>
  );
};

const ChildComponent: FC<{ count: number }> = (props) => {
  const output = useDebug("ChildComponent", props);

  return (
    <>
      <div>{props.count}</div>
      <div>{JSON.stringify(output)}</div>
    </>
  );
};

The output will be printed in your devTools as a console log.

Here's a sample of the output:

{
  "count": 8,
  "changedProps": { "count": { "previous": 5, "current": 6 } },
  "timeSinceLastRender": 200,
  "lastRenderTimestamp": 1666792387890
}

useIsVisible

Get if the given element is visible on screen, or not. The second argument is the possibility to add a positive/negative offset. Perfect for your needs, isn't it?

usage

import { type FC } from "react";
import { useIsVisible } from "hooks-me";

const Component: FC = () => {
  const mainRef = useRef(null);
  const isVisible = useIsVisible(mainRef, "-100px");

  return (
    <>
      <div style={{ height: 2000, backgroundColor: "lightblue" }} />
      <div ref={mainRef}>{isVisible ? "Yep" : "Nope"}</div>
      <div style={{ height: 2000, backgroundColor: "lightblue" }} />
    </>
  );
};

useLocalStorage

usage

import { type FC } from "react";
import { useLocalStorage } from "hooks-me";

const Component: FC = () => {
  const [word, setWord, clearWord] = useLocalStorage("word", "famous");

  return (
    <>
      <div>Hooks me, I'm {word}</div>
      <button onClick={() => setWord("very famous")}>Set another word</button>
      <button onClick={() => clearWord()}>Clear</button>
    </>
  );
};

useSessionStorage

usage

import { type FC } from "react";
import { useSessionStorage } from "hooks-me";

const Component: FC = () => {
  const [word, setWord, clearWord] = useSessionStorage("word", "famous");

  return (
    <>
      <div>Hooks me, I'm {word}</div>
      <button onClick={() => setWord("very famous")}>Set another word</button>
      <button onClick={() => clearWord()}>Clear</button>
    </>
  );
};

useUpdateEffect

Skip the first rendering and trigger the callback after.

usage

import { type FC } from "react";
import { useUpdateEffect } from "hooks-me";

const Component: FC = () => {
  const [count, setCount] = useState(0);

  useUpdateEffect(() => alert("Done!"), [count]);

  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount((old) => old + 1)}>Add</button>
    </>
  );
};

useWindowSize

Get the window size.

usage

import { type FC } from "react";
import { useWindowSize } from "hooks-me";

const Component: FC = () => {
  const [width, height] = useWindowSize();

  return (
    <>
      <div>Width: {width}</div>
      <div>Height: {height}</div>
    </>
  );
};