react-use-hooks

React Customised Hooks Library

Performant, flexible & extensible hooks with easy-to-use flexibility. react-use-hooks reduces the amount of code you need to write while removing unnecessary re-renders.

Table of contents

• Getting started
• API

Getting started

Installation

npm install --save @tam11a/react-use-hooks

API

• useTitle
• useToggle
• usePaginate

useTitle

Change the Website Title with useTitle().

Import

import { useTitle } from "@tam11a/react-use-hooks";

Usage

useTitle("My First App"); // Change the app title

Pass the expected title you want the website renamed and it's done.

Example

import React from "react";
import { useTitle } from "@tam11a/react-use-hooks";

const App = () => {
  // useTitle() to change the app title
  useTitle("My First App");
  return (
    <>
      <div>Hello World!</div>
    </>
  );
};

export default App;

useToggle

useToggle is the toggle state functionality everytime you need to make in different component.

Import

import { useToggle } from "@tam11a/react-use-hooks";

Usage

const { state, toggleState, setState } = useToggle(defaultValue);

Current state in state,

toggle function in toggleState()

or directly set the state value with setState().

The default value of the boolean state is always false

Example

const App = () => {
  const { state, toggleState } = useToggle(true);
  return (
    <>
      <div>
        Light is: <button onClick={toggleState}>{state ? "On" : "Off"}</button>
      </div>
    </>
  );
};

usePaginate

usePaginate, the pagination for pages and data tables handling hook.

Import

import { usePaginate } from "@tam11a/react-use-hooks";

Usage

const {
  params,
  limit,
  setLimit,
  page,
  setPage,
  search,
  setSearch,
  watch,
  setFilterField,
  getQueryParams,
} = usePaginate();

params : returns all the params in the hook

limit : number type variable that returns the limit or page size

setLimit : to set the page size or limit, pass the limit

page : number type variable that returns the current page number

setPage : to set the page number, pass the page number

search : string type variable carries the search string

setSearch : to set search string, pass the string

watch : to get value of any filter field as state, watch always work

setFilterField : set or update any filter field pass the field name & value

getQueryParams : returns all params as query object

Default Values

const { getQueryParams } = usePaginate({
  defaultParams: {
    limit: 5,
  },
});

Default params can be passed as following. If no params passed, the default params will be setted as,

limit: 10

page: 1

search: ""

filters: {}

Example

const App = () => {
  const { page, setPage } = usePaginate();

  return (
    <div>
      <button onClick={() => setPage(page - 1)}>-</button>
      {page}
      <button onClick={() => setPage(page + 1)}>+</button>
    </div>
  );
};

console.log(getQueryParams());

License

N/A © tam11a