Installation

How to add and structure the hooks in your project.

Create folder

Begin by creating a folder named hooks in your project. This is where you will house your custom hooks.

Here's the structure I typically follow:

.
├── src
│   ├── hooks
│        ├── use-abort-controller.ts
│        ├── use-cookie.ts
│        ├── use-history.ts
│        ├── use-local-storage.ts
│        └── ...
└── ...

- use-abort-controller.ts
- use-cookie.ts
- use-history.ts
- use-local-storage.ts

Choose hook

Select the hook (opens in a new tab) that suits your requirements.
Simply copy the code snippet provided and paste it into your project.
Don't hesitate to tweak and personalize it to align with our specific needs—after all, the code is yours to mold.

Add hook

For example, let's say we pick useCookie (opens in a new tab) as our desired hook:

Create a file named use-cookie.ts.
Copy and paste the code from use-cookie (opens in a new tab) into this file.

Usage

 
import './App.css'
import { setCookie } from './hooks/use-cookie'
 
function App() {
    const addCookie = (key: string, value: string, options: any) => {
        setCookie('pass-key', 'xyz', options)
    }
 
    return (
        <div style={{ display: 'flex', gap: 10 }}>
            <button onClick={addCookie('pass-key', 'xyz', {})}>Add Cookie</button>
        </div>
    )
}
 
export default App

That's it !

Introduction Changelog