Introduction

Welcome to Plenty Hooks — a collection of reusable React hooks with fully TS support.

Installation

You only need to install the specific hook you want to use. The installation instructions will be available on the documentation page for each hook.

We chose this approach because no single library can realistically cover every possible hook. You might need one hook from one library and another from a different one. Instead of installing a large library that includes all hooks (which could also cause conflicts), our approach lets you install only what you actually need.

Quick Example

npm install @plenty-hooks/use-document-title # Installation

import { useDocumentTitle } from '@plenty-hooks/use-document-title';

export function DashboardPage() {
  const setTitle = useDocumentTitle('Dashboard - My App');

  const handleNotification = () => {
    setTitle('(1) Dashboard - My App');
  };

  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={handleNotification}>
        Simulate Notification
      </button>
    </div>
  );
}

Adding Source Code of the Hook

There is also an alternative option to add the source code of the hook directly to your project using our CLI tool. This approach gives you full control over the code and allows you to customize it to your specific needs.

You will find the installation instructions for adding the source code on each hook's respective documentation page.

Example:

npx @plenty-hooks/cli use-document-title

Note: By adding the source code of the hook directly to your project, you won't be able to install further updates automatically. You are on your own for maintaining and updating the code.

New Hook Feature

If you want to have a new hook, create a feature request on GitHub. 🚀