@soleilyasmina/hooks

    0.3.1 • Public • Published

    @soleilyasmina's React Hooks

    This package contains hooks that @soleilyasmina uses frequently.

    npm version

    Table of Contents

    Installing

    This package can be installed either via NPM or Yarn.

    With npm:

    npm install @soleilyasmina/hooks

    With yarn:

    yarn add @soleilyasmina/hooks

    Usage

    These hooks can be implement into any React functional component by importing them from the package:

    import { usePrevState, useResize, useToggle } from "@soleilyasmina/hooks";

    usePrevState

    To create a state with an automatically updated previous state, implement usePrevState:

    import { usePrevState } from "@soleilyasmina/hooks";
    
    const Counter = () => {
      const [count, prevCount, setCount] = usePrevState(0, 0);
    
      return (
        <div>
          <span>{count}</span>
          <span>{prevCount}</span>
          <button onClick={() => setCount(count + 1)}>+</button>
          <button onClick={() => setCount(count - 1)}>-</button>
        </div>
      );
    };
    
    export default Counter;

    useResize

    To create an effect that runs depending on the window's current size, implement useResize:

    import { useState } from "react";
    import { useResize } from "@soleilyasmina/hooks";
    
    const Menu = () => {
      const [visible, setVisible] = useState(true);
      const [hamburger, setHamburger] = useState(false);
    
      useResize(() => {
        if (window.innerWidth > 425) {
          setVisible(true);
          setHamburger(false);
        } else {
          setVisible(false);
        }
      });
    
      return (
        <header>
          <h1>Sitename</h1>
          <span style={{ display: visible ? "none" : "inline" }}>+</span>
          <nav style={{ display: visible || hamburger ? "flex" : "none" }}>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </nav>
        </header>
      );
    };
    
    export default Menu;

    useToggle

    To create a state with a setter that toggles a boolean, implement useToggle:

    import { useToggle } from "@soleilyasmina/hooks";
    
    function DarkModeButton() {
      const [darkMode, toggleDarkMode] = useToggle(false);
    
      const style = {
        backgroundColor: darkMode ? 'black' : 'white',
        color: darkMode ? 'white' : 'black',
      }
    
      return (
        <div style={style}>
          <button onClick={toggleDarkMode}>Toggle Dark Mode</button>
       </div>
      );
    }
    
    export default DarkModeButton;

    Credits

    This package was inspired by useHooks.

    Keywords

    none

    Install

    npm i @soleilyasmina/hooks

    DownloadsWeekly Downloads

    2

    Version

    0.3.1

    License

    ISC

    Unpacked Size

    6.08 kB

    Total Files

    3

    Last publish

    Collaborators

    • soleilyasmina