https://github.com/emapco/react-util-hooks
A collection of hooks I've created across various projects.
https://github.com/emapco/react-util-hooks
Last synced: 3 months ago
JSON representation
A collection of hooks I've created across various projects.
- Host: GitHub
- URL: https://github.com/emapco/react-util-hooks
- Owner: emapco
- License: mit
- Created: 2023-07-27T09:09:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T23:59:04.000Z (over 1 year ago)
- Last Synced: 2024-02-13T00:45:16.080Z (over 1 year ago)
- Language: TypeScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-util-hooks
A collection of hooks I've created across various projects.
## useWindowSize usage
```tsx
import { useMemo } from "react";
import { useScreenSize } from "path/to/hook/useScreenSize";
function App() {
// object destruct the window size boolean states you are interested in
const { isSmall, isLarge } = useWindowSize();
// utilize the booleans as needed
const iconSize = useMemo(() => {
if (isLarge) return 30;
if (isSmall) return 24;
else return 22;
}, [isSmall, isLarge]);
}
```
## useAutoFocus usage
Useful when you want to auto focus an element when it enters the viewport.
For example, to auto focus a search field when a dropdown is toggled open.
```tsx
import { useMemo } from "react";
import { useAutoFocus } from "path/to/hook/useAutoFocus";
function App() {
// object destruct the window size boolean states you are interested in
const { ref, inViewport } = useAutoFocus();
// pass ref to component/element that needs auto focus when visible
return ()
}
```