A collection of React hooks for interacting with various browser APIs. This library simplifies the use of modern browser features in your React applications by providing easy-to-use hooks.
npm install react-hooks-simplifiedbash
npm install react-hooks-simplified
Available Hooks
- useBattery
- useGeolocation
- useClipboard
- useNetwork
- useMediaDevices
- useFullscreen
- useSpeechSynthesis
- useLocalStorage
- useIntersectionObserver
- useIdle
- useNotifications
- useWindowSize
- useDarkMode
- useMediaQuery
useBattery Hook
The useBattery hook provides information about the battery status of the device.
$3
`jsx
import { useBattery } from 'react-hooks-simplified';
const BatteryStatus = () => {
const { battery, charging, level } = useBattery();
return (
Battery Level: {level * 100}%
Charging: {charging ? 'Yes' : 'No'}
);
};
`
useGeolocation Hook
The useGeolocation hook provides information about the user's geographical location.
$3
`jsx
import { useGeolocation } from 'react-hooks-simplified';
const LocationDisplay = () => {
const { position, error } = useGeolocation();
if (error) {
return Error: {error}
;
}
return (
{position ? (
Latitude: {position.latitude}, Longitude: {position.longitude}
) : (
Fetching location...
)}
);
};
`
useClipboard Hook
The useClipboard hook provides methods for interacting with the clipboard.
$3
`jsx
import { useClipboard } from 'react-hooks-simplified';
const ClipboardComponent = () => {
const { clipboardData, copyToClipboard, readClipboard, error } = useClipboard();
return (
{error && Error: {error}
}
{clipboardData && Clipboard Data: {clipboardData}
}
);
};
`
useNetwork Hook
The useNetwork hook provides information about the network status of the browser.
$3
`jsx
import { useNetwork } from 'react-hooks-simplified';
const NetworkStatus = () => {
const { networkInfo, isOnline } = useNetwork();
return (
Online: {isOnline ? 'Yes' : 'No'}
{networkInfo && (
Effective Connection Type: {networkInfo.effectiveType}
Downlink: {networkInfo.downlink} Mbps
)}
);
};
`
useMediaDevices Hook
The useMediaDevices hook provides access to the media devices available on the user's device.
$3
`jsx
import { useMediaDevices } from 'react-hooks-simplified';
const MediaDevicesList = () => {
const { devices, error } = useMediaDevices();
return (
{error && Error: {error}
}
{devices.map((device) => (
- {device.label}
))}
);
};
`
useFullscreen Hook
The useFullscreen hook provides methods for handling fullscreen mode.
$3
`jsx
import { useFullscreen } from 'react-hooks-simplified';
import { useRef } from 'react';
const FullscreenComponent = () => {
const ref = useRef(null);
const { isFullscreen, enterFullscreen, exitFullscreen } = useFullscreen(ref);
return (
Content to display in fullscreen
);
};
`
useSpeechSynthesis Hook
The useSpeechSynthesis hook provides methods for controlling the speech synthesis API.
$3
`jsx
import { useSpeechSynthesis } from 'react-hooks-simplified';
const SpeakButton = () => {
const { speak, cancel, speaking } = useSpeechSynthesis();
return (
);
};
`
useLocalStorage Hook
The useLocalStorage hook provides a way to interact with the browser's local storage.
$3
`jsx
import { useLocalStorage } from 'react-hooks-simplified';
const NameSaver = () => {
const [name, setName] = useLocalStorage('name', '');
return (
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
Stored Name: {name}
);
};
`
useIntersectionObserver Hook
The useIntersectionObserver hook provides information about the visibility of an element.
$3
`jsx
import { useRef } from 'react';
import { useIntersectionObserver } from 'react-hooks-simplified';
const IntersectionComponent = () => {
const ref = useRef(null);
const isIntersecting = useIntersectionObserver(ref);
return (
{isIntersecting ? 'In view' : 'Out of view'}
);
};
`
useIdle Hook
The useIdle hook determines if the user is idle or active.
$3
`jsx
import { useIdle } from 'react-hooks-simplified';
const IdleComponent = () => {
const isIdle = useIdle(5000); // User is idle after 5 seconds of inactivity
return {isIdle ? 'User is idle' : 'User is active'}
;
};
`
useNotifications Hook
The useNotifications hook provides methods for showing notifications and requesting permission.
$3
`jsx
import { useNotifications } from 'react-hooks-simplified';
const NotificationsComponent = () => {
const { permission, requestPermission, showNotification } = useNotifications();
return (
onClick={() => showNotification('Hello!', { body: 'This is a notification.' })}
disabled={permission !== 'granted'}
>
Show Notification
);
};
`
useWindowSize Hook
The useWindowSize hook provides information about the current window size.
$3
`jsx
import { useWindowSize } from 'react-hooks-simplified';
const WindowSizeComponent = () => {
const { width, height } = useWindowSize();
return (
Width: {width}px
Height: {height}px
);
};
`
useDarkMode Hook
The useDarkMode hook provides methods for toggling between dark and light mode.
$3
`jsx
import { useDarkMode } from 'react-hooks-simplified';
const DarkModeComponent = () => {
const { isDarkMode, toggleDarkMode } = useDarkMode();
return (
);
};
`
useMediaQuery Hook
The useMediaQuery hook provides a way to detect media query matches.
$3
`jsx
import { useMediaQuery } from 'react-hooks-simplified';
const MediaQueryComponent = () => {
const isLargeScreen = useMediaQuery('(min-width: 1024px)');
return {isLargeScreen ? 'Large screen' : 'Small screen'}
;
};
`
``