npm package: @mikaaru/usehooks
Description: Contains react custom hooks utility
Author: arufars & miyu
Latest version: 0.3.0

# usehooks
[![CodeFactor](https://www.codefactor.io/repository/github/mikaaru/usehooks/badge/main)](https://www.codefactor.io/repository/github/mikaaru/usehooks/overview/main)

usehooks is a collection of utility custom hooks for React especially Nextjs. With usehooks, you can easily manage state, side effects, and other common React needs in a concise and reusable way.

## Features

- [`usePage`](#usepage) is a custom hook for creating pagination functions in your React app or Nextjs Folder (app)

# Todo List

At the moment usehooks is still in development. The following hooks are planned to be added:

- [x] usePage
- [x] useSearch
- [ ] useFetch
- [ ] useLocalStorage
- [ ] useSort

## Installation

```bash
npm install @mikaaru/usehooks
```

## Usage

### usePage

usePage is a custom hook for creating pagination

```typescript
import { usePage } from '@mikaaru/usehooks'

const { data, prev, next, nextPage, prevPage } = usePage(dataArray, config)
```

#### Parameter

- `dataArray` is an array of data that will be paginated
- `config` is an object that contains the configuration of the pagination
  - `sortKey` specifies the key of the data to be sorted. ex: `name`, `age`, `address`
  - `sortOrder` specifies the sort order of the data. The default value is `asc`
  - `start` specifies the starting index of the data to paginate.
  - `page`  customizable data count per page
  - `current` setting indicates the current page of the data being displayed

#### Return

- `data` is an array of data that has been paginated
- `showNumber` is an Object that contains the number of data to be displayed
  - `totalPage` is the total number of pages
  - `current` is the current page
- `next` Boolean that indicates whether there is a next page
- `prev` Boolean that indicates whether there is a previous page
- `nextPage` Function that will move to the next page
- `prevPage` Function that will move to the previous page


### useSearch

useSearch is a custom hook for creating search build to [`MiniSearch`](https://lucaong.github.io/minisearch/) library 



```typescript
import { useSearch } from '@mikaaru/usehooks'

function App() {
  const data = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' },
    { id: 4, name: 'Mango' },
  ]

  const options = {
    fields: ['name'],
  }

  const { results, query, handleQuery, searchIndex } = useSearch(data, options)

  return (
    <div>
      <input type="text" value={query} onChange={handleQuery} />
      {results.map((result) => (
        <div key={result.id}>{result.name}</div>
      ))}
    </div>
  )
}

```

#### Parameter

The `useSearch` hook takes two arguments:

- `data`: The array of data to search from.
- `options`: The options for configuring the MiniSearch instance.

`options` is an optional argument that can be used to set additional options for MiniSearch, such as the id field of the data.

#### Return

The `useSearch` hook returns an object with the following properties:

- `results`: The search results based on the search term.
- `query`: The search term entered by the user.
- `handleQuery`: The function to handle the search term entered by the user.
- `searchIndex`: The MiniSearch instance.

## Documentation

For more information, please visit the [documentation](https://usehooks.vercel.app/).

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details