React custom hooks
npm install @rrc-npm/r-hooksnpm i @rrc-npm/r-hooks
or
yarn add @rrc-npm/r-hooks
---
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);
``