React Custom Hooks

Installation

npm i @rrc-npm/r-hooks

or

yarn add @rrc-npm/r-hooks

Hooks

$3

---

Trigger the callback function on clicking outside the referenced element.

``
// import from the package
import {useOutsideClick} from "@rrc-npm/r-hooks";

export default function Demo() {
// define the ref
const demoRef = useRef();

// Handle clicking outside the element
useOutsideClick(demoRef, () => {
// your code
});

return (



);
}
`

$3

---

Hook for handling any Javascript events.

`
useEventListener("mousedown", () => {
// ... your code
});
`

$3

---

Extended useState hook to keep data in the browser's localStorage. It can be used when a state needs to persist even after reloading the browser.

`
const [state,setState] = useLocalStorage(KEY,INITIAL_VALUE)
`

The KEY will be using as the key in the localStorage.

$3

---

Hook to check the network status and trigger the callback function if online.

`
// get the status
const isOnline = useOnlineStatus();

// trigger on changing the status
useEffect(() => {
if (isOnline) console.log("You're online");
}, [isOnline]);
`

$3

---

An extended useEffect hook for triggering on updates not for initial rendering.

`
useUpdateEffect(() => {
console.log("Updated");
}, [dependency]);
`

$3

---

Hook to create a persisting state same like useLocalStorage, but the data is added to the URL queries instead of local storage. It will be helpful if you need to share a URL with data filled.

`
const [state, setState] = useQueryState(KEY,INITIAL_VALUE);
`

The KEY will be using as the key in the URL query.

$3

---

This hooks is same like the useQueryState, but instead the query parameters, it is using the hash URLs.

`
const [state, setState] = useHashState(KEY,INITIAL_VALUE);
`

$3

---

This hook will keep a state as readonly. It can be used to compare the initial value of a changing state.

`
const initialState = useReadonly(name);
``