aruhooks

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

Table of Contents

• 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>
  );
}

How to contribute

Please make sure to read the Contributing Guide before making a pull request.

License

MIT