ATLEUGIM-HOOKS

Some react hooks I use on my projects

The hooks

• useCookie (uses js-cookie)
• useDebounce
• useLocalStorage
• useLockScroll
• useOnClickOutside
• useOnScreen

Installation

Installation with npm

  npm install atleugim-hooks

Installation with yarn

  yarn add atleugim-hooks

Installation with pnpm

  pnpm add atleugim-hooks

Usage/Examples

• useCookie

import { useCookie } from "atleugim-hooks";

const App = () => {
  const { value, updateCookie, deleteCookie } = useCookie("ssid", null);

  return (
    <div>
      <p>Cookie value: {value}</p>
      <div>
        <button onClick={() => updateCookie("atleugim")}>
          Update cookie value
        </button>
        <button onClick={() => deleteCookie()}>Delete cookie</button>
      </div>
    </div>
  );
};

export default App;

• useDebounce

import { useDebounce } from "atleugim-hooks";

const App = () => {
  const [value, setValue] = useState();
  const debouncedValue = useDebounce(value, 1000);

  return (
    <div>
      <p>State value: {value}</p>
      <div>
        <input type="text" onChange={(e) => setValue(e.target.value)} />
        <p>Debounced value: {debouncedValue}</p>
      </div>
    </div>
  );
};

export default App;

• useLocalStorage

import { useLocalStorage } from "atleugim-hooks";

const App = () => {
  const { value, updateKey, deleteKey } = useLocalStorage("cart");

  return (
    <div>
      <p>LocalStorage value: {value}</p>
      <div>
        <input type="text" onChange={(e) => updateKey(e.target.value)} />
        <button onClick={() => deleteKey()}>Delete key</button>
      </div>
    </div>
  );
};

export default App;

• useLockScroll

import { useLockScroll } from "atleugim-hooks";

const App = () => {
  const { lock, unlock } = useLockScroll();

  return (
    <div
      style={{
        height: "200vh",
      }}
    >
      <button onClick={() => lock()}>Lock Scroll</button>
      <button onClick={() => unlock()}>Unlock Scroll</button>
    </div>
  );
};

export default App;

• useOnClickOutside

import { useOnClickOutside } from "atleugim-hooks";

const App = () => {
  const ref = useRef(null);
  const [outside, setOutside] = useState(false);

  useOnClickOutside(ref, () => setOutside(true));

  return (
    <div>
      <p ref={ref} onClick={() => setOutside(false)}>
        isClickOutside: {outside ? "Yes" : "No"}
      </p>
    </div>
  );
};

export default App;

• useOnScreen

import { useOnScreen } from "atleugim-hooks";

const App = () => {
  const ref = useRef(null);
  const isOnScreen = useOnScreen(ref, 200);

  return (
    <div>
      <div
        style={{
          height: "100vh",
          backgroundColor: isOnScreen ? "green" : "red",
        }}
      ></div>
      <p ref={ref}>isOnScreen: {isOnScreen ? "Yes" : "No"}</p>
    </div>
  );
};

export default App;

Authors

• @atleugim