imbhargav5 / Rooks
Licence: mit
Essential hooks ⚓ to super charge your components!
Stars: ✭ 889
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Rooks
React Uploady
Modern file uploading - components & hooks for React
Stars: ✭ 372 (-58.16%)
Mutual labels: hooks, components
Zent
A collection of essential UI components written with React.
Stars: ✭ 2,133 (+139.93%)
Mutual labels: hooks, components
Reef
A lightweight library for creating reactive, state-based components and UI.
Stars: ✭ 700 (-21.26%)
Mutual labels: components
Clarity
Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
Stars: ✭ 6,398 (+619.69%)
Mutual labels: components
Vue Instantsearch
👀 Algolia components for building search UIs with Vue.js
Stars: ✭ 707 (-20.47%)
Mutual labels: components
Webhook
webhook is a lightweight incoming webhook server to run shell commands
Stars: ✭ 7,201 (+710.01%)
Mutual labels: hooks
Iview
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 23,930 (+2591.79%)
Mutual labels: components
Fprime
F' - A flight software and embedded systems framework
Stars: ✭ 8,642 (+872.1%)
Mutual labels: components
Catberry
Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering.
Stars: ✭ 793 (-10.8%)
Mutual labels: components
React Async Hook
React hook to handle any async operation in React components, and prevent race conditions
Stars: ✭ 781 (-12.15%)
Mutual labels: hooks
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (-21.03%)
Mutual labels: components
Web3 React
🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps
Stars: ✭ 788 (-11.36%)
Mutual labels: hooks
Nbstripout
strip output from Jupyter and IPython notebooks
Stars: ✭ 738 (-16.99%)
Mutual labels: hooks
Jss
JSS is an authoring tool for CSS which uses JavaScript as a host language.
Stars: ✭ 6,576 (+639.71%)
Mutual labels: components
A super awesome collection of regularly used custom hooks as utils for React.
Complete Documentation
List of all hooks
- use-boundingclientrect-ref - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.
- use-boundingclientrect - A React Hooks package for boundingclientrect
- use-countdown - Count down to a target timestamp and call callbacks every second (or provided peried)
- use-counter - A React Hooks package for counter
- use-debounce - Debounce hook for react
- use-did-mount - A React hooks package for componentDidMount
- use-did-update - componentDidUpdate hook for react
- use-document-event-listener - A react hook to an event listener to the document object
- use-effect-once-when - Runs a callback effect atmost one time when a condition becomes true
- use-event-listener-ref - A react hook to add an event listener to a ref
- use-fork-ref - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
- use-fresh-ref - Avoid stale state in callbacks with this hook. Auto updates values using a ref.
- use-fresh-tick - Like use-fresh-ref but specifically for functions
- use-fullscreen - A React Hooks package for fullscreen.
- use-geolocation - A hook to provide the geolocation info on client side.
- use-input - A React Hooks package for input
- use-intersection-observer-ref - A hook to register an intersection observer listener
- use-interval-when - Sets an interval immediately when a condition is true
- use-interval - A react hook for using setInterval
- use-isomorphic-effect - Resolves to useEffect when window is not in scope and useLayout effect in the browser
- use-key-ref - Very similar to useKey but it returns a ref
- use-key - Keyboard key handler hook for react
- use-keys - A hook which allows to setup callbacks on multiple keypresses at the same time
- use-localstorage-state - UseState but auto updates values to localStorage
- use-localstorage - Local Storage hook for React
- use-map-state - A react hook to manage state in a key value pair map.
- use-merge-refs - Merges any number of refs into a single ref
- use-mouse - A React Hooks package for mouse
- use-multi-selectable-list - A custom hook to easily select multiple values from a list
- use-mutation-observer-ref - A hook that tracks mutations of an element. It returns a callbackRef.
- use-mutation-observer - A React Hooks package for mutation-observer
- use-navigator-language - A React Hooks package for navigator-language
- use-on-window-scroll - A React hook for window on scroll event
- use-on-window-resize - A React hook for window on resize event
- use-online - A React Hooks package for online
- use-outside-click-ref - A hook that can track a click event outside a ref. Returns a callbackRef.
- use-outside-click - React hook for tracking clicks outside a ref
- use-previous-different - usePreviousDifferent hooks returns the last different value of a variable
- use-previous-immediate - usePreviousImmediate returns the previous value of a variable even if it was the same or different
- use-previous - Access the previous value of a variable with this React hook
- use-queue-state - A React hook that manages state in the form of a queue
- use-raf - A continuously running requestAnimationFrame hook for React
- use-select - A React Hooks package for select
- use-selectable-list - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc.
- use-sessionstorage-state - useState but syncs with sessionstorage
- use-sessionstorage - Session storage react hook. Easily manage session storage values
- use-stack-state - A React hook that manages state in the form of a stack
- use-throttle - A throttle hook for react
- use-time-ago - A React Hook to get time ago for timestamp millisecond value
- use-timeout-when - Takes a callback and fires it when a condition is true
- use-timeout - A React Hooks package for timeout
- use-toggle - A React Hooks package for toggle
- use-undo-state - Drop in replacement for useState hook but with undo functionality.
- use-update-effect - An useEffect that does not run on first render
- use-visibility-sensor - A React Hooks package for visibility-sensor
- use-will-unmount - A React hook for componentWillUnmount lifecycle method
- use-window-event-listener - Adds an event listener to window
- use-window-scroll-position - A React hook to get the scroll position of the window
- use-window-size - A React Hooks package for window-size
- use-worker - A React Hooks package for worker
Features
✅ Collection of 60 hooks as standalone modules.
✅ Standalone package with all the hooks at one place
✅ CommonJS, UMD and ESM Support
Installation
For a specific hook like useDidMount
npm i -s @rooks/use-did-mount
npm i -s @rooks/use-interval
import useDidMount from "@rooks/use-did-mount";
For standalone build with all the hooks
npm i -s 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):
This project follows the all-contributors specification. Contributions of any kind welcome!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].