A collection of cool hooks from various sources, or by me.
npm install cmbdev-react-hooks
A collection of cool and useful React hooks from various sources and some rewritten by me.
``bash`
npm install cmbdev-react-hooks
or
`
yarn add cmbdev-react-hooks
It's generally a good practice to indicate to users the status of any async request. An example would be fetching data from an API and displaying a loading indicator before rendering the results. Another example would be a form where you want to disable the submit button when the submission is pending and then display either a success or error message when it completes.
Rather than litter your components with a bunch of useState calls to keep track of the state of an async function, you can use our custom hook which takes an async function as an input and returns the value, error, and status values we need to properly update our UI. Possible values for status prop are: "idle", "pending", "success", "error". As you'll see in the code below, our hook allows both immediate execution and delayed execution using the returned execute function.
#### Usage
`javascript
import { useAsync } from 'cmbdev-react-hooks';
function App() {
const { execute, status, value, error } = useAsync(myFunction, []);
return (
const myFunction = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const rnd = Math.random() * 10;
rnd <= 5
? resolve("Submitted successfully đ")
: reject("Oh no there was an error đ");
}, 2000);
});
};
`
Detects clicks outside of a specified element. Useful for closing modals, dropdowns, etc.
#### Usage
`javascript
import { useClickOutside } from 'cmbdev-react-hooks';
function MyCoolComponent() {
const wrapperRef = useClickOutside(() => {
// Do something when a click occurs outside the element
console.log('Clicked outside!');
});
return
$3
Delays invoking a function until after a specified number of milliseconds have elapsed since the last time it was invoked. Useful for input fields, search bars, etc.
#### Usage
javascript
import { useDebounce } from 'cmbdev-react-hooks';function MyComponent() {
const [value, setValue] = useState('');
const debouncedValue = useDebounce(value, 500); // 500ms delay
useEffect(() => {
// Do something with the debounced value
console.log('Debounced value:', debouncedValue);
}, [debouncedValue]);
return (
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
`$3
A declarative way to add event listeners to DOM elements.
#### Usage
javascript
import { useEventListener } from 'cmbdev-react-hooks';function MyComponent() {
const handler = useCallback((event) => {
// Do something with the event
console.log('Mouse moved!', event);
}, []);
useEventListener('mousemove', handler); // Defaults to window
const myElementRef = useRef(null);
useEventListener('click', handler, myElementRef.current); // Attach to a specific element
return
Move your mouse;
}
`$3
Fetches data from an API and returns the data, loading state, and any errors.
#### Usage
javascript
import { useFetch } from 'cmbdev-react-hooks';function MyCoolComponent() {
const { data, loading, error } = useFetch<{ message: string }>('https://api.example.com/data');
if (loading) return
Loading...;
if (error) return Error: {error.message}; return
Data: {data?.message};
}
`$3
Detects when the mouse is hovering over an element.
#### Usage
javascript
import { useHover } from 'cmbdev-react-hooks';function MyComponent() {
const [hoverRef, isHovered] = useHover();
return (
{isHovered ? 'đ' : 'âšī¸'}
);
}
`$3
Detects when a specific key is pressed.
#### Usage
javascript
import { useKeyPress } from 'cmbdev-react-hooks';function App() {
const happyPress = useKeyPress('h');
const sadPress = useKeyPress('s');
const robotPress = useKeyPress('r');
const foxPress = useKeyPress('f');
return (
h, s, r, f
{happyPress && 'đ'}
{sadPress && 'đĸ'}
{robotPress && 'đ¤'}
{foxPress && 'đĻ'}
);
}
`$3
Manages a value in local storage.
#### Usage
javascript
import { useLocalStorage } from 'cmbdev-react-hooks';function MyComponent() {
const [name, setName] = useLocalStorage('name', 'Bob');
return (
value={name}
onChange={(e) => setName(e.target.value)}
/>
);
}
`$3
Detects if the window matches a given media query.
#### Usage
javascript
import { useMediaQuery } from 'cmbdev-react-hooks';function MyComponent() {
const isSmallScreen = useMediaQuery('(max-width: 600px)');
return (
Screen is small: {isSmallScreen ? 'Yes' : 'No'}
);
}
``Contributions are welcome! Please read the contributing guidelines before submitting a pull request.
MIT