use-react-custom-hooks v1.0.2

📗 Documentation

Installing 🛠

# With npm
$ npm i use-react-custom-hooks

# With Yarn
$ yarn add use-react-custom-hooks

Examples

🪟 useWindowResize

A really common need is to get the current size of the browser window. This hook returns an object containing the window's width and height.

Usage

import { useWindowResize } from "./hookindex";

function App() {

  const screenSize = useWindowResize();

  return (
    <div className="App">
      <h1>{screenSize.width <= 600 ? "mobile" : "Laptop"}</h1>
    </div>
  );
}

export default App;

🏀 useDebounce

Convert a normal function to a debounced function.

Note: More about Debouncing : here

Usage

import React from "react";
import { useDebounce } from "use-custom-hooks";

const LocalValue = () => {
  const fetchData = () => {
    //Fetch Data function
  };

  const debouncedFetchData = useDebounce(fetchData, 300);
  /*
   No matter how many times we call this function in 300ms, it will only
   execute once.
  */

  return <div>Lorem Ipsum</div>;
};

🔘 useToggle

Using the useToggle hook to create a toggle state with the initial value as false. const isToggled, toggleValue = useToggle(false);

Usage

import React from "react";
import { useToggle } from "use-custom-hooks";

function MyComponent() {
  // Using the useToggle hook to create a toggle state with the initial value as `false`.
  const [isToggled, toggleValue] = useToggle(false);

  return (
    <div>
      <p>Toggle State: {isToggled ? "ON" : "OFF"}</p>
      <button onClick={() => toggleValue()}>Toggle</button>
    </div>
  );
}