pegas-react-hooks v1.2.0

Pegas React Hooks

A simple package containing useful hooks for the react library.

Instalation

To install run in terminal:

npm i pegas-react-hooks

Hooks

useToggle

The useToggle hook allows you to manage a boolean state value in a React component, and provides a function to toggle the state value between true and false.

Usage

useToggle(active: boolean = false): [boolean, () => void]): void

• active (boolean, optional): The initial state value. By default, the initial state value is false.
• Returns an array containing the current state value and a function to toggle the state value.

The first element in the returned array is the current state value, which is a boolean. The second element is a function that toggles the state value between true and false.

Example

Here's an example usage of the useToggle hook in a React component:

import React from "react";
import useToggle from "./useToggle";

const MyComponent = () => {
  const [isActive, toggleIsActive] = useToggle();

  return (
    <div>
      <button onClick={toggleIsActive}>
        {isActive ? "Active" : "Inactive"}
      </button>
    </div>
  );
};

export default MyComponent;

In this example, we're using the useToggle hook to manage a boolean state value called isActive, and to provide a function toggleIsActive that toggles the value of isActive between true and false. When the button is clicked, the toggleIsActive function is called, which toggles the value of isActive, causing the text on the button to change.

By using the useToggle hook, we can simplify the management of a boolean state value and the function to toggle the value, without having to write additional boilerplate code.

useWindowSize

The useWindowSize hook allows you to get the current size of the window in a React component, and automatically updates the size whenever the window is resized.Returns the current width and height of the window. As a parameter, it takes timeout in milliseconds, which is used as a delay in starting the onresize event. The default delay is 200 milliseconds.

Usage

useWindowSize(timeout: number = 200): [number, number]

• timeout (number, optional): The delay in milliseconds before updating the window size after a resize event. By default, the delay is set to 200.
• Returns an array containing the current width and height of the window.

Example

Here's an example usage of the useWindowSize hook in a React component:

import React from "react";
import useWindowSize from "./useWindowSize";

const MyComponent = () => {
  const [windowWidth, windowHeight] = useWindowSize();

  return (
    <div>
      <p>Window width: {windowWidth}px</p>
      <p>Window height: {windowHeight}px</p>
    </div>
  );
};

export default MyComponent;

In this example, we're using the useWindowSize hook to get the current width and height of the window, and to display the values in the component. Whenever the window is resized, the hook automatically updates the windowWidth and windowHeight values, causing the component to re-render with the new values.

By using the useWindowSize hook, we can simplify the management of the window size in a React component, and ensure that the size is always up-to-date without having to write additional boilerplate code.

useEventListener

The useEventListener hook allows you to add event listeners to an element in a React component. This hook handles adding and removing event listeners when the component mounts and unmounts respectively.

Usage

  useEventListener<T extends Event>(
  eventName: keyof HTMLElementEventMap,
  handler: EventListener<T>,
  element: null | HTMLElement | Window = window
): void

• eventName (string): The name of the event to listen for.
• handler (function): The event handler function that will be called when the event is triggered.
• element (HTMLElement | Window = window, optional): The DOM element to attach the event listener to. By default, the window object is used.

The useEventListener hook returns void, since it handles adding and removing event listeners internally.

Example

Here's an example usage of the useEventListener hook in a React component:

import React, { useState } from "react";
import useEventListener from "./useEventListener";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleKeyPress = (event: KeyboardEvent) => {
    if (event.key === "Enter") {
      setCount((prevCount) => prevCount + 1);
    }
  };

  useEventListener("keydown", handleKeyPress);

  return <div>Count: {count}</div>;
};

export default MyComponent;

useLocalStorage

The useLocalStorage hook provides a simple way to persist and retrieve data to and from the browser's localStorage. It accepts a key and an initial value, and returns a tuple containing the current value and a function to update the value. The value is automatically saved to localStorage whenever it changes.

Usage

useLocalStorage<T>(key: string, initialValue: T): [T, (newValue: T) => void]

• key (string): A unique key to identify the value in localStorage.
• initialValue (any): The initial value to set if the key does not exist in localStorage.
• Returns a tuple containing the current value and a function to update the value.

The first element in the returned tuple is the current value stored in localStorage, or the initialValue if the key does not exist. The second element is a function that can be called to update the value stored in localStorage.

Example

Here's an example usage of the useLocalStorage hook in a React component:

import React from "react";
import useLocalStorage from "./useLocalStorage";

const MyComponent = () => {
  const [name, setName] = useLocalStorage("name", "John");

  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  return (
    <div>
      <p>My name is {name}</p>
      <input type="text" value={name} onChange={handleNameChange} />
    </div>
  );
};

export default MyComponent;

In this example, we're using the useLocalStorage hook to store and retrieve the user's name in localStorage. Whenever the user types a new name in the input field, the setName function updates the value stored in localStorage, causing the component to re-render with the new name.

By using the useLocalStorage hook, we can easily store and retrieve data in localStorage without having to write additional boilerplate code.

useReadLocalStorage

The useReadLocalStorage hook provides a simple way to read data from the browser's localStorage. It accepts a key and a default value, and returns the value associated with the key in localStorage or the default value if the key does not exist.

Usage

useReadLocalStorage<T>(key: string, defaultValue: T): T

• key (string): A unique key to identify the value in localStorage.
• defaultValue (any): The default value to return if the key does not exist in localStorage.
• Returns the value associated with the key in localStorage or the default value if the key does not exist.

The hook retrieves the value associated with the key in localStorage. If the key does not exist in localStorage, the hook returns the defaultValue provided.

Example

Here's an example usage of the useReadLocalStorage hook in a React component:

import React from "react";
import useReadLocalStorage from "./useReadLocalStorage";

const MyComponent = () => {
  const name = useReadLocalStorage("name", "John");

  return (
    <div>
      <p>My name is {name}</p>
    </div>
  );
};

export default MyComponent;

In this example, we're using the useReadLocalStorage hook to read the user's name from localStorage. If the key 'name' does not exist in localStorage, the hook returns the default value 'John', which is then displayed in the component.

By using the useReadLocalStorage hook, we can easily read data from localStorage without having to write additional boilerplate code.