React Customised Hooks Library

Downloads NPM JavaScript Style Guide

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.

• Getting started
• API

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

• useTitle
• useToggle
• usePaginate

Change the Website Title with useTitle().

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

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

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

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 is the toggle state functionality everytime you need to make in different component.

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

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

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

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

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

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

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: {}

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());

N/A © tam11a