@cannonui/reacthooks NPM

Cannon React Hooks

Cannon React Hooks is a collection of useful custom hooks for React applications. It provides a set of reusable hooks that solve common problems and enhance the functionality of your React components.

Features

useDebounce: A hook for debouncing the value of an input field.

And many more will be available soon!

Installation

Install the package using npm:

npm install @cannonui/reacthooks

Usage

Here's how you can use the hook from this library:

import { useState } from "react";
import { useDebounce } from "@cannonui/reacthooks";

const TestUseDebounce = () => {
  const [inputValue, setInputValue] = useState("");

  const debouncedValue = useDebounce(inputValue, 1000);

  const handleChange = (e: any) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Debounced value: {debouncedValue}</p>
    </div>
  );
};

export default TestUseDebounce;