usehooks

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 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

npm install @mikaaru/usehooks

Usage

usePage

usePage is a custom hook for creating pagination

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 library

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.

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 file for details