4.11.2 • Published 5 years ago

@rooks/use-counter

Licence

MIT

Version

4.11.2

Deps

Size

144 kB

Vulns

Weekly

Stars

3.4K

Summary Dependency Versions

Why Rooks ?

Collection of awesome react hooks

125+ essential React hooks — tree-shakeable, SSR-ready, TypeScript-first.

Documentation · Quick Start · Playground · Report Bug

Quick Start
Why Rooks?
Popular Hooks
All Hooks by Category
Features
Installation
Usage
Contributors
License

Quick Start

Get up and running in seconds:

npm install rooks
# or
yarn add rooks
# or
pnpm add rooks

Import any hook and start using it:

import { useDidMount, useCounter, useToggle } from "rooks";

function App() {
  const { value, increment, decrement } = useCounter(0);
  const [isOn, toggleIsOn] = useToggle(false);

  useDidMount(() => {
    console.log("Component mounted! 🎉");
  });

  return (
    <div>
      <h1>Count: {value}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>

      <h2>Toggle is {isOn ? "ON" : "OFF"}</h2>
      <button onClick={toggleIsOn}>Toggle</button>
    </div>
  );
}

Browse all hooks • Try in CodeSandbox

Why Rooks?

	Focused Each hook does one thing well		Tree-shakeable Import only what you need
	SSR Ready Works with Next.js, Remix, Gatsby		Well Tested 95%+ code coverage
	Documented Every hook has examples & demos		TypeScript First Full type safety out of the box
	Modern Built for React 18+ with ESM		Community Driven 82 contributors and growing

Popular Hooks

State Management

useCounter _{Counter with increment/decrement}	useToggle _{Toggle between values}	useLocalstorageState _{useState with localStorage sync}
`const { value, increment }` `= useCounter(0)`	`const [on, toggle]` `= useToggle()`	`const [user, setUser]` `= useLocalstorageState('user')`

Event Handling

useKey
_{Keyboard event handling}

useOutsideClick
_{Detect clicks outside element}

useOnClickRef
_{Click handler with ref}

Lifecycle & Effects

useDidMount
_{componentDidMount equivalent}

useWillUnmount
_{componentWillUnmount equivalent}

useDebounce
_{Debounce any value}

List of all hooks

Animation & Timing ¹⁰

Hook	Description
useAnimation	Animation hook for React
useEasing	A hook for creating controlled easing animations with start/stop/reset capabilities.
useIntervalWhen	Sets an interval immediately when a condition is true
useLockBodyScroll	This hook locks the scroll of the body element when `isLocked` is set to `true`.
usePrefersReducedMotion	A React hook that returns true if the user has enabled the 'prefers-reduced-motion' setting in their system.
useRaf	A continuously running requestAnimationFrame hook for React
useResizeObserverRef	Resize Observer hook for React.
useSpring	Spring animation hook for React
useTimeoutWhen	Takes a callback and fires it when a condition is true
useTween	Tween animation hook for React

Browser APIs ¹⁶

Hook	Description
useBroadcastChannel	A React hook that provides a clean interface to the Broadcast Channel API for cross-tab/window communication
useClipboard	Clipboard read/write operations hook for React
useGeolocation	A hook to provide the geolocation info on client side.
useIdleDetectionApi	Hook to detect when user is idle using Idle Detection API with polyfill
useMediaRecorder	Audio/video recording from MediaStream
useNetworkInformation	Network connection quality detection hook for React
useNavigatorLanguage	Navigator Language hook for React.
useNotification	Browser notifications with permission handling
useOnline	Online status hook for React.
useOrientation	orientation hook for react
useScreenDetailsApi	Hook for multi-screen information and management using Screen Details API
useWebLocksApi	Hook for coordinating operations across tabs/workers with Web Locks API
useShare	Web Share API for native sharing
useSpeech	Speech synthesis hook for React
useFetch	Hook for fetching data from URLs with loading states, error handling, and automatic JSON parsing
useVibrate	Vibration API hook for React

Development & Debugging ¹

Hook	Description
useRenderCount	Get the render count of a component

Events ¹⁶

Hook	Description
useDocumentEventListener	A react hook to an event listener to the document object
useDocumentVisibilityState	Returns the visibility state of the document.
useFocus	Handles focus events for the immediate target element.
useFocusWithin	Handles focus events for the target component.
useIsDroppingFiles	Check if any files are currently being dropped anywhere. Useful for highlighting drop areas.
useOnClickRef	Callback on click/tap events
useOnHoverRef	On hover callback hook
useOnLongHover	Fires a callback when an element is hovered for a while
useOnLongPress	Fire a callback on long press
useOnStartTyping	Fires a callback when the user starts typing outside editable fields (input, textarea, contenteditable). Supports filtering for a-z and 0-9 keys.
useOnWindowResize	A React hook for adding an event listener for window resize
useOnWindowScroll	A React hook for adding an event listener for window scroll
useOutsideClick	Outside click(for a ref) event as hook for React.
useOutsideClickRef	A hook that can track a click event outside a ref. Returns a callbackRef.
usePageLeave	Page leave detection with callbacks for beforeunload and visibility change
useWindowEventListener	Adds an event listener to window

Form & File Handling ³

Hook	Description
useCheckboxInputState	Simple checkbox state management hook that provides a boolean state and props that can be spread directly onto a checkbox input element
useFileDropRef	Drop files easily
useFormState	Comprehensive form state management with validation

Keyboard & Input ⁵

Hook	Description
useInput	Input hook for React.
useKey	keypress, keyup and keydown event handlers as hooks for react.
useKeyBindings	useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press.
useKeyRef	Very similar useKey but it returns a ref
useKeys	A hook which allows to setup callbacks when a combination of keys are pressed at the same time.

Lifecycle & Effects ¹¹

Hook	Description
useAsyncEffect	A version of useEffect that accepts an async function
useDebouncedAsyncEffect	A version of useEffect that accepts an async function and debounces its execution based on dependency changes
useDebouncedEffect	A version of useEffect that debounces the effect execution based on dependency changes
useDeepCompareEffect	Deep compare dependencies instead of shallow for useEffect
useDidMount	componentDidMount hook for React
useDidUpdate	componentDidUpdate hook for react
useDocumentTitle	A hook to easily update document title with React
useEffectOnceWhen	Runs a callback effect atmost one time when a condition becomes true
useIsomorphicEffect	A hook that resolves to useEffect on the server and useLayoutEffect on the client.
useLifecycleLogger	A react hook that console logs parameters as component transitions through lifecycles.
useWillUnmount	componentWillUnmount lifecycle as hook for React.

Mouse & Touch ³

Hook	Description
useMouse	Mouse position hook for React.
useMouseMoveDelta	Tracks delta of mouse move
useMouseWheelDelta	Tracks delta of mouse move

Performance & Optimization ⁵

Hook	Description
useDebounce	Debounce hook for react
useDebouncedValue	Tracks another value and gets updated in a debounced way.
useDebounceFn	Powerful debounce function hook for React
useThrottle	Throttle custom hook for React
useWebWorker	Web Worker management with message passing

State ²²

Hook	Description
useArrayState	Array state manager hook for React
useCountdown	Count down to a target timestamp and call callbacks every second (or provided peried)
useCounter	Counter hook for React.
useGetIsMounted	Checks if a component is mounted or not at the time. Useful for async effects
useLocalstorageState	UseState but auto updates values to localStorage
useMapState	A react hook to manage state in a key value pair map.
useMultiSelectableList	A custom hook to easily select multiple values from a list
useNativeMapState	Manage Map() object state in React
usePreviousDifferent	usePreviousDifferent returns the last different value of a variable
usePreviousImmediate	usePreviousImmediate returns the previous value of a variable even if it was the same or different
usePromise	Promise management hook for react
useQueueState	A React hook that manages state in the form of a queue
useSafeSetState	set state but ignores if component has already unmounted
useSelect	Select values from a list easily. List selection hook for react.
useSelectableList	Easily select a single value from a list of values. very useful for radio buttons, select inputs etc.
useSessionstorageState	useState but syncs with sessionstorage
useSetState	Manage the state of a Set in React.
useStackState	A React hook that manages state in the form of a stack
useTemporalAge	Returns the calendar age from a birth date, updating at each day boundary
useTemporalCountdown	Returns the remaining duration until a target instant with aligned updates
useTemporalElapsed	Returns the elapsed duration since a start instant with aligned updates
useTemporalNow	Returns the current time as a Temporal value with aligned updates

State History & Time Travel ⁴

Hook	Description
useTimeTravelState	A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
useToggle	Toggle (between booleans or custom data)hook for React.
useUndoRedoState	Setstate but can also undo and redo
useUndoState	Drop in replacement for useState hook but with undo functionality.

UI ¹⁴

Hook	Description
useAudio	Audio hook
useBoundingclientrect	getBoundingClientRect hook for React.
useBoundingclientrectRef	A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.
useDimensionsRef	Easily grab dimensions of an element with a ref using this hook
useFullscreen	Use full screen api for making beautiful and emersive experinces.
useMeasure	Measures both inner and outer dimensions of any DOM element in a performant way and updates when dimensions change
useIntersectionObserverRef	A hook to register an intersection observer listener.
useInViewRef	Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.
useMediaMatch	Signal whether or not a media query is currently matched.
useMutationObserver	Mutation Observer hook for React.
useMutationObserverRef	A hook that tracks mutations of an element. It returns a callbackRef.
usePictureInPictureApi	Hook for managing Picture-in-Picture video functionality
usePreferredColorScheme	Color scheme preference detection (dark/light mode)
useVideo	Video hook for react

Utilities & Refs ⁷

Hook	Description
useEventListenerRef	A react hook to add an event listener to a ref
useForkRef	A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
useFreshCallback	Avoid stale closures and keep your callback fresh
useFreshRef	Avoid stale state in callbacks with this hook. Auto updates values using a ref.
useFreshTick	Like use-fresh-ref but specifically for functions
useMergeRefs	Merges any number of refs into a single ref
useRefElement	Helps bridge gap between callback ref and state

Window & Viewport ²

Hook	Description
useWindowScrollPosition	A React hook to get the scroll position of the window
useWindowSize	Window size hook for React.

Experimental Hooks ⁶

Hook	Description
useSuspenseNavigatorBattery	Suspense-enabled hook for getting battery status information from Navigator Battery API
useSuspenseFavicon	Suspense-enabled hook for reading and updating the current favicon with same-origin and external URL support
useSuspenseNavigatorUserAgentData	Suspense-enabled hook for getting high entropy values from Navigator User Agent Data API
useSuspenseLocalStorageState	Suspense-enabled hook for localStorage state management with cross-tab synchronization
useSuspenseSessionStorageState	Suspense-enabled hook for sessionStorage state management with proper serialization
useSuspenseIndexedDBState	Suspense-enabled hook for IndexedDB state management with structured data storage and cross-tab synchronization

Experimental hooks may be removed or significantly changed in any release without notice. Use with caution in production.

Features

Collection of 125 hooks as standalone modules.

Standalone package with all the hooks at one place

CommonJS, UMD and ESM Support

Installation

npm install rooks
# or
yarn add rooks
# or
pnpm add rooks

Import any hook from "rooks" and start using them!

import { useDidMount } from "rooks";

Usage

function App() {
  useDidMount(() => {
    alert("mounted");
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Standalone Package

Package containing all the hooks is over here. - Docs and Npm Install

License

MIT

Contributors

Thanks goes to these wonderful people (emoji key):

View all 63 contributors

_{Bhargav Ponnapalli}	_{anil kumar chaudhary}	_{Qiwei Yang}	_{maciek_grzybek}	_{Harsh Zalavadiya}	_{B V K MAHIJENDRA}	_{Braxton Christensen}
_Hansel	_{Harshil Parmar}	_Lionel	_{Max Stoiber}	_{Michael Moore}	_{Rajas Paranjpe}	_{Mahendra Choudhary}
_{Nghia Pham}	_{Akshay Kadam (A2K)}	_{Alex Golubtsov}	_Arman	_{Branden Visser}	_{Brian Steere}	_{Cal Courtney}
_{Chris Milson}	_{Cong Zhang}	_{Daniel Holmes}	_{Fernando Beck}	_{Josh Davenport}	_MARCEL	_{Neilor Caldeira}
_{Tobias Lins}	_Tsvetan	_{Wei Zhu}	_{Yakko Majuri}	_{Frank Hellwig}	_{Austin Peterson}	_thodubois
_{wes christiansen}	_{CJ Patoilo}	_mar1u50	_{Ayushman Gupta}	_{Rafael Ferreira}	_{Kristinn Thor Johannsson}	_{Michael Moore}
_{Trevor Blades}	_{official_dulin}	_{Billy Mosis Priambodo}	_{Stafford Williams}	_{Chanhee Kim}	_Hooriza	_{Nils Wittler}
_{Sebastian Szczepański}	_{Mahendra Choudhary}	_{Som Shekhar Mukherjee}	_{Qiushi Pan}	_{Jishnu Viswanath}	_brahambence	_{dependabot[bot]}
_{renovate[bot]}	_{dependabot-preview[bot]}	_{github-actions[bot]}	_{allcontributors[bot]}	_zhangenming	_{Antoni Kiszka}	_{Greg Poole}

@rooks/use-counter

Collection of awesome react hooks

List of all hooks

Animation & Timing 10

Browser APIs 16

Development & Debugging 1

Events 16

Form & File Handling 3

Keyboard & Input 5

Lifecycle & Effects 11

Mouse & Touch 3

Performance & Optimization 5

State 22

State History & Time Travel 4

UI 14

Utilities & Refs 7

Window & Viewport 2

Experimental Hooks 6