Installation

To use the hookstorm package, follow the installation instructions below for your project.

Installation

You can install the hookstorm package from the npm registry using either npm or yarn.

Using npm

Run the following command in your terminal:

npm install hookstorm

Using yarn

Alternatively, you can use yarn to install the package:

yarn add hookstorm

Features

• useCookie: Manage cookies with ease.
• useCopyToClipboard: Copy text to the clipboard and handle copy events.
• useCountDown: Implement countdown timers with configurable intervals.
• useCounter: Create counters with easy increment and decrement functionality.
• useDocumentTitle: Update the document title dynamically.
• useHover: Detect hover states on elements.
• useKeyPress: Detect key press events.
• useLocalStorage: Manage local storage with hooks.
• useLockScroll: Lock or unlock scroll on elements or the entire page.
• usePrefersTheme: Detect user’s preferred theme ('dark' or 'light').
• usePrevious: Access previous state or props values.
• useScrollPosition: Track and manage scroll position.
• useSessionStorage: Manage session storage with hooks.
• useToggle: Toggle between true and false states.
• useWindowSize: Track window size changes.

Importing Hooks

Once installed, you can import the hooks from the hookstorm package into your React components. For example:

import { useCounter, useDocumentTitle, useKeyPress } from "hookstorm";

Example

Here's a quick example of how to use a hook from the hookstorm package:

import { useCounter } from "hookstorm";
import React from "react";

const CounterComponent: React.FC = () => {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => increment(2)}>Increment +2</button>
      <button onClick={() => decrement(3)}>Decrement -3</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CounterComponent;

Notes

• Ensure that your React version is compatible with the hookstorm package requirements.
• For more detailed documentation on each hook, refer to the Hooks Documentation (link to your hooks documentation if available).

Conclusion

The hookstorm package provides a set of useful custom hooks to enhance your React applications. Install it today to start leveraging its powerful functionality in your projects.