react-dynamic-hooks is a set of React hooks for handling infinite scrolling, cookie state management, storage state management (session and local storage), geolocation, and clipboard copying. These hooks aim to simplify common tasks in React applications.
Install the package using npm or yarn:
npm install react-dynamic-hooksor
yarn add react-dynamic-hooksThis hook takes care of infinite scrolling logic, allowing you to focus on rendering data and handling loading states.
Parameters :
-
scrollContainerRef: A reference to the scroll container element. -
setData: Function to set the fetched data. -
fetchData: Async function to fetch data. It should accept a page number as an argument. -
page: The current page number. -
setPage: Function to update the page number. -
loadTriggerOffset(optional): Offset from the bottom to trigger the load more action. Default is 50.
Returns :
-
isLoading: Boolean indicating if data is being loaded. -
hasMore: Boolean indicating if there are more items to load.
import React, { useRef, useState } from "react";
import { useInfinityScroller } from "react-dynamic-hooks";
const MyComponent = () => {
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
const containerRef = useRef(null);
const fetchData = async (page) => {
// Ensure to pass the "page" parameter (you can name it as you like) to fetch the corresponding data.
try {
const response = await fetch(
`https://jsonplaceholder.typicode.com/todos?_page=${page}&_limit=10`
);
const jsonData = await response.json();
return jsonData; // Must return data(Array)
} catch (error) {
console.log(error); //Handle errors
return []; // Return empty array in case of error
}
};
const { isLoading, hasMore } = useInfinityScroller(
containerRef,
setData,
fetchData,
page,
setPage
);
return (
<div
className=""
style={{
display: "grid",
placeItems: "center",
height: "90vh",
width: "90vw",
}}
>
<div
className=""
style={{
overflowY: "auto",
height: "40vh",
width: "40vw",
background: "aliceblue",
padding: "10px",
}} //overflowY must be 'auto' or 'scroll' (other than 'hidden')
//Giving height is also necessary for this div
ref={containerRef}
>
{data &&
data.length > 0 &&
data.map((d, index) => (
<div key={index} style={{ marginBottom: "10px" }}>
<div className="">{d.id} id</div>
<div className="">{d.userId} userId</div>
</div>
))}
</div>
</div>
);
};A hook for using asynchronous functions in useEffect. This hook is similar to useEffect only change is in this hook we can pass Async function.
Parameters :
-
effect: Async function to run -
deps: Dependency array (Optional) (default : [] )
import { useAsyncEffect } from "react-dynamic-hooks";
const ExampleComponent = () => {
useAsyncEffect(async () => {
const data = await fetchData();
console.log(data);
}, []);
return <div>Check the console for data</div>;
};useCookieState acts like useState for cookies. It returns a funtion to update that cookie state.
Parameters :
-
key: The name of the cookie -
defaultValue: The initial value to use if the cookie doesn't exist. It's optional.
Returns :
-
[value, setValue]: The current value and a function to update that cookie.
import { useCookieState } from "react-dynamic-hooks";
const MyComponent = () => {
const [token, setToken] = useCookieState("authToken", null); //If cookie not exist then set to null
return (
<>
{!token ? (
<>
<h1>User is logged in</h1>
</>
) : (
<>
<h1>Please login</h1>
</>
)}
</>
);
};There is also two additional functions for your convenience :
Parameters :
-
name: The name of the cookie -
value: Value of the cookie -
options(Optional) : Options for cookie like expires, path, domain, secure, httpOnly, maxAge, sameSite
setCookie("authToken", token);Parameters :
-
name: The name of the cookies
Returns :
-
value: Cookie value or null if not exist
getCookie("authToken");A hook for copying text to the clipboard.
Parameters :
-
text: The text you want to copy to the clipboard.
Returns :
-
Promise<boolean>: A promise that resolves totrueif the text was successfully copied, otherwisefalse.
import React, { useState } from "react";
import { useCopyToClipboard } from "react-dynamic-hooks";
const CopyTextComponent = () => {
const [text, setText] = useState("");
const [copyStatus, setCopyStatus] = useState(null);
const handleCopy = async () => {
const result = await useCopyToClipboard(text);
setCopyStatus(result ? "Copied!" : "Failed to copy.");
};
return (
<div>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Enter text to copy"
/>
<button onClick={handleCopy}>Copy to Clipboard</button>
{copyStatus && <p>{copyStatus}</p>}
</div>
);
};
export default CopyTextComponent;useGeolocation is a custom React hook for accessing the user's geolocation. It handles obtaining and watching the user's position, managing loading state, and handling errors.
Parameters :
-
options(optional): An object with options for the geolocation API. These options can include:-
enableHighAccuracy: A boolean indicating whether to request the most accurate location possible. Default isfalse. -
timeout: The maximum length of time (in milliseconds) the device is allowed to take in order to return a position. Default isInfinity. -
maximumAge: The maximum age (in milliseconds) of a possible cached position that is acceptable to return. Default is0.
-
Returns :
-
loading: A boolean indicating whether the geolocation data is still being fetched. -
error: An error object if there was an error while fetching the geolocation data. -
data: An object containing the geolocation coordinates (latitude,longitude, etc.) of the user.
import React from "react";
import { useGeolocation } from "react-dynamic-hooks";
const GeolocationComponent = () => {
const { loading, error, data } = useGeolocation({
enableHighAccuracy: true,
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<h1>User Location</h1>
<p>Latitude: {data.latitude}</p>
<p>Longitude: {data.longitude}</p>
<p>Accuracy: {data.accuracy} meters</p>
</div>
);
};
export default GeolocationComponent;useLocalStorageState behaves like useState for local storage. It retrieves a value from local storage based on a key, and automatically updates your component's state when the value changes. This allows your component to stay in sync with local storage data.
Parameters :
-
key: The name of the key in localstorage -
defaultValue: The initial value to use if the key doesn't exist in localstorage. It's optional.
Returns :
-
[value, setValue]: The current value and a function to update that localstorage item.
import { useLocalStorageState } from "react-dynamic-hooks";
const MyComponent = () => {
const [theme, setTheme] = useLocalStorageState("theme", 'light'); //If theme not exist then set to light
return (
<>
<div className=`${theme}`>
//Component
</div>
</>
);
};useSessionStorageState behaves like useState for session storage. It retrieves a value from session storage based on a key, and automatically updates your component's state when the value changes. This allows your component to stay in sync with session storage data.
Parameters :
-
key: The name of the key in session storage -
defaultValue: The initial value to use if the key doesn't exist in session storage
Returns :
-
[value, setValue]: The current value and a function to update that session storage item.
import { useSessionStorageState } from "react-dynamic-hooks";
const MyComponent = () => {
const [theme, setTheme] = useSessionStorageState("theme", 'light'); //If theme not exist then set to light
return (
<>
<div className=`${theme}`>
//Component
</div>
</>
);
};