A react modern hooks library for customized and reusable hooks
npm install react-modern-hooksReact modern hooks is a library for customized and reusable hooks.
These hooks depend on react library under the hood.
_Disclaimer: atleast react version 16.8 is required for the hooks_
``bash
npm install react-modern-hooks
`
or
`bash`
yarn add react-modern-hooks
Having issues setting up or using this hooks library, file a bug report here
You can find the complete React Modern Hooks documentation on the website
- useFetch - Hook for fetching/refetching data from an API endpoint
- useNetwork - Hook for getting the network status
- useFullScreen - Hook to toggle a given HTMLElement to fullscreen and exit fullscreen
- useGeolocation - Hook to get a users current geographic location
- useSelectedText - Hook to get the highlighted text on a page
- useCopyToClipboad - Hook to copy text to clipboad
- useStateCallback - Hook that acts as a state callback i.e. functionality same as react class-based setState that provides a fallback with your current set state
- useResize - Hook to handle page resizing
- useSearch - Hook to allow delayed search and only search after a user releases all keys for set timeout
- useImageDownload - Hook that allows download of images from a given url
- useFocus - Hook to autofocus input and/or textarea components
- useDebounce - Hook to for delayed callback functions
- useStorage - Hook to allow use of localstorage
- useOs - Hook to get the current OS of the userAgent
- usePageTitle - Hook to update the page title of a document url
- useOnline - Hook to check if user is currently online or offline
- useDeviceDetect - Hook to detect the device a user is using and/or if either mobile or not
We have several examples and complete guide on the website. Here are a few to get you started:
Hook for fetching/refetching data from an API endpoint
#### Usage
`jsx
import { useFetch } from 'react-modern-hooks';
const Demo = () => {
const { data, loading, refetch, processRequest, error } = useFetch('https://jsonplaceholder.typicode.com/todos');
if (loading) return
Loading...
;if (error || !data) return
{error}
; const handleRequest = () => {
processRequest('https://jsonplaceholder.typicode.com/todos', {
method: 'POST',
});
};
return (
Data Fetched
#### Reference
##### Input Variables
- The API endpoint to fetch data from
options - optional parameters allowed to be passed when fetching data from an endpoint##### Output Variables
data - returned data from the api endpoint
error - Error response returned incase something goes wrong during data fetching
loading - Loading state returned when data is still loading from the API endpoint
refetch - Refetch function to refetch data
processRequest - A helper function to process requests made via POST or PATCH or DELETE methodsuseNetwork
A React Hook that gets the users network information and which provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes
#### Usage
`jsx
import { useNetwork } from 'react-modern-hooks';const Demo = () => {
const { connection } = useNetwork();
connection.onchange = (e) => {
// Handle change of connection type here.
};
return (
Network Info
Downlink: {connection.downlink}
Downlink Max: {connection.downlinkMax}
Round trip time: {connection.rtt}
Has user set a reduced data usage option on the user agent: {connection.saveData}
Connection Type: {connection.type}
);
};
`##### References
###### Output Variables
- The connection response of the networkuseFullScreen
A React hook that enables a HTMLElement or component to toggle into a fullscreen and/or exit fullscreen. This hooks provides the open, close and toggle methods which can be used to switch the screen from open to closed or viceversa.
#### Usage
`jsx
import { useRef } from 'react';
import { useFullScreen } from 'react-modern-hooks';const Demo = () => {
const ref = useRef(null);
const { fullScreen, close, open, toggle, error } = useFullScreen(ref);
if (error) {
console.log('Error: ', error);
}
return (
This is the div (one with ref) that will enter fullscreen mode
{fullScreen ? Only visible in fullscreen mode
: Not in fullscreen mode
}
);
};
`#### References
##### Input Variables
- A HTMLElement mutable ref object to toggle to fullscreen
onExit - An optional callback function to run when exiting fullscreen##### Output Variables
fullScreen - A boolean value to show if fullscreen or not
open - A function to open the referenced component/element to fullscreen window
close - A function to close/exit the referenced component/element from fullscreen window
toggle - A function to both open and/or close/exit the referenced component/element to and from fullscreen window
error - An error message incase something doesn't go right on opening and/or closing fullscreen windowuseGeolocation
A react hook which gets a users/agent's current geographic location. It return both the city, ip, country and other location variables useful in determining a users position on the world map
#### Usage
`jsx
import { useGeolocation } from 'react-modern-hooks';const Demo = () => {
const {
loading,
error,
userIP,
city,
country,
latitude,
longitude,
region,
location, //Object that comes with other properties on top
} = useGeolocation();
if (error) {
console.log('Error: ', error);
}
if (loading) return
Loading...
; return (
User IP Address: {userIP}
City: {city}
Country: {country}
Region: {region}
Longitude: {longitude}
Latitude: {latitude}
Location Timezone: {location?.timezone}
);
};
`#### References
##### Output Variables
- Location object with all other user details
latitude - Current latitude of a user/agent's position
longitude - Current longitude of a user/agent's position
userIP - Current IP address of a user/agent
city - City the user/agent is currently located in
region - Region the user/agent is currently located in
country - Country the user/agent is currently located in
error - Any error occurring during geolocating a user/agent
loading - A boolean variable indicating if a users location is still being fetcheduseCopyToClipboard
A React Hook that allows copying of text to clipboad. Providing the capability to copy text from one medium to another. The hook provides a copyText method which can be used to copy the text
#### Usage
`jsx
import { useCopyToClipboard } from 'react-modern-hooks';const Demo = () => {
const { copiedText, copyText, error, copied } = useCopyToClipboard();
console.log('is text copied', copied);
return (
{error ? Error copying text: {error}
: null}
);
};
`#### References
##### Output Variables
- Error message that occured during copy
copied - Boolean state if the text was copied successfully
copiedText - The copied text
copyText` - A function to copy the text