Skip to content
React Hooks

Getting Started

Overview

This tutorial provides a quick guide on installing and using the @abhushanaj/react-hooks package.

Installation

To get started, you need to install the package. Use one of the following commands based on your package manager:

Terminal window
npm install @abhushanaj/react-hooks

Requirements

If you are looking to support React (<=17.x.x) versions, you will need to provide a polyfill or shim for the following hooks.

  1. useSyncExternalStore for subscribing and managing external stores. The shim is available here.

Browser support

The library is optimized for modern browsers and is transpiled with ES6 as output target.

Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from node_modules yourselves

Usage

All hooks are named exports, so importing them is straightforward.

  1. Import a single hook

    ./src/App.tsx
    import { useDocumentTitle } from '@abhushanaj/react-hooks;

  2. Import multiple hooks.

    You can also import multiple hooks at once.

    ./src/App.tsx
    import { useDocumentTitle, useToggle } from '@abhushanaj/react-hooks;

Example

./src/App.tsx
import React from 'react';
import { useDocumentTitle } from '@abhushanaj/react-hooks';


function App() {
  const [count, setCount] = React.useState(0);
  useDocumentTitle(`Count: ${count}`);


  return (
    <div>
      <p>Count is : {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment by 1</button>
    </div>
  );
}


export default App;

Conclusion

You’re now set up with @abhushanaj/react-hooks and ready to enhance your React components with these convenient hooks.

Explore the documentation for each hook to unleash their full potential in your projects.