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.

• 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