Contribution

How to contribute to Rehook and share your custom hook.

Thank you for your interest in contributing to Rehook!

I appreciate your support and look forward to your contributions.

This guide will help you understand the directory structure and provide detailed instructions on how to add a new hook to Rehook.

Once done, open a pull request from your forked repo to the main repo here (opens in a new tab).

Getting Started

Fork and Clone the Repository

Fork (opens in a new tab) the repository

Clone your forked repository to your local machine

git clone https://github.com/<YOUR_USERNAME>/rehook.git

Navigate to the project directory
```
cd rehook
```
Create a new branch for your changes
```
git checkout -b my-new-branch
```
Install dependencies
```
npm install
```
Run the project
```
npm run dev
```

Adding a New Hook

To add a new hook to Rehook, you will need to add and modify several files. Follow these steps:

1. Create Your Hook

- use-example.ts

const useExample = () => {
    // Your code here
}

2. Test Your Hook

- - use-example.spec.ts

describe('useExample', () => {
    // Your test cases here
})

Document Your Hook

Go to rehook-wesbite (opens in a new tab) repository and clone it.

1. Create MDX page

- use-example.mdx

 
# useExample
 
<h3 className="mt-4 text-xl font-normal text-gray-400">Description.</h3>
 
## Add hook
 
Create a file `use-example.ts` and copy & paste the code from [useExample](/hooks/use-example#hook).
 
## Usage
 
function App() {
const {example} = useExample()
}
 
export default App
 
### Hook
 
const Example = ()=>{
    // Your code here
}
 
export default Example
 
## API
 
<h3 className="text-xl font-medium mt-6">Parameters</h3>
 
| Parameter | Type   | Description  |
| --------- | ------ | ------------ |
| `name`    | `type` | Description. |
|           |
 
 
<h3 className="text-xl font-medium mt-6">Returns</h3>
 
| Name   | Type   | Description  |
| ------ | ------ | ------------ |
| `name` | `type` | Description. |

2. Add Page Meta

- _meta.json

 
"use-example":"useExample"

3. Add New Badge

theme.config.jsx

  sidebar: {
    titleComponent({ title, type }) {
      return (
        <div className="flex items-center justify-between relative w-full">
          <div>{title}</div>
          {(title === "useExample"
           ) && (
            <Badge className=" absolute -right-[0.5em] bg-transparent border-rose-500 text-rose-500 px-[0.5em] hover:bg-transparent">
              New
            </Badge>
          )}
        </div>
      );
    },
  },

That's it!

Ask for Help

For any help or questions, please open a new GitHub issue (opens in a new tab) and we will get back to you.

CLI useAbortController