@aruhooks/mine NPM

aruhooks

A collection of hooks created as needed - 🚧 Still in development.

Installation
Hooks
- usePagenation
- Comming Soon
  - Usage Example
  - API
    - Options
    - Return Value

Installation

npm install @aruhooks/mine

or with pnpm

pnpm add @aruhooks/mine

Hooks

`1. usePagenation`

usePagenation is a hook used to paginate data. This hook accepts two parameters, data and options.

Usage Example

import usePagenation from "./hooks/usePagenation";

function ExampleComponent() {
  const data = [/* your data array */];
  const options = { sliceSize: 4, currentPages: 1 };

  const { sliceData, nextPage, prevPage, disableNext, disablePrev } = usePagenation(data, options);

  // Render sliceData and buttons to go to next or previous page
  return (
    // your JSX code here
  );
}

Comming Soon Another Hooks 🔥

API

usePagenation(data, options)

Accepts two parameters:

data - (Array): Data to be paginated.
options - (Object): Options used to configure pagination.

Options

sliceSize - (Number, default: 4): The number of data items to display per page.
currentPages - (Number, default: 1): The currently active page.
config - (Object, optional): An object that can be used to configure the pagination with the following properties:
- sortKey - (Keyof T, optional): A property to specify the key in the data to be used for sorting. If not provided, the data will not be sorted.
- sortOrder - (String, optional, default: asc): Data sort order. The accepted value is asc or desc.

Return Value

usePagenation returns an object with the following properties:

sliceData - (Array): Data that has been sliced according to the options.
nextPage - (Function): Function to go to the next page.
prevPage - (Function): Function to go to the previous page.
disableNext - (Boolean): Indicates whether the button to go to the next page should be disabled or not.
disablePrev - (Boolean): (Boolean): Indicates whether the button to go to the previous page should be disabled or not.
currentPage - (Number): Indicates the currently active page

Example

import usePagenation from "./hooks/usePagenation";

function ExampleComponent() {
  const data = [
    "item 1",
    "item 2",
    "item 3",
    "item 4",
    "item 5",
    "item 6",
    "item 7",
    "item 8",
    "item 9",
    "item 10",
  ];
  const options = { sliceSize: 4, currentPages: 1 };

  const { sliceData, nextPage, prevPage, disableNext, disablePrev } = usePagenation(data, options);

  return (
    <div>
      {sliceData.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
      <button onClick={prevPage} disabled={disablePrev}>
        Previous
      </button>
      <button onClick={nextPage} disabled={disableNext}>
        Next
      </button>
    </div>
  );
}