https://github.com/uetchy/microhooks
🔱 Collection of useful React Hooks.
https://github.com/uetchy/microhooks
react react-hooks
Last synced: about 1 year ago
JSON representation
🔱 Collection of useful React Hooks.
- Host: GitHub
- URL: https://github.com/uetchy/microhooks
- Owner: uetchy
- License: other
- Created: 2019-10-03T10:30:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-26T11:14:04.000Z (almost 6 years ago)
- Last Synced: 2024-05-01T23:59:59.718Z (about 2 years ago)
- Topics: react, react-hooks
- Language: TypeScript
- Homepage:
- Size: 503 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# microhooks
A tiny collection of useful React Hooks.
## Install
```
yarn add microhooks
```
## API
### `useDeferredState`
Function as `useState` but will be deferred for the specific amount of time to avoid excessing API limit.
```tsx
import { useDeferredState } from 'microhooks';
const Form: React.FC = () => {
const [query, setQuery] = useDeferredState(500, 'Initial value');
useEffect(() => {
fetch(`https://example.com/api?query=${query}`)
.then(response => response.json())
.then(json => {
console.log(json);
});
}, [query]);
function handleInput(e) {
setQuery(e.value);
}
return ;
};
```
### `useTakeEffect`
Unlike `useEffect`, `useTakeEffect` will be called when all of the given props are neither `undefined` nor `null`.
```tsx
import { useTakeEffect } from 'microhooks';
const App: React.FC = () => {
const ref = useRef(null);
useTakeEffect(() => {
ref.current.innerHTML = 'hey';
}, [ref.current]);
return
;
};
```
### `usePrefetch`
Prefetch any kind of media for the cache.
```tsx
import { usePrefetch } from 'microhooks';
const App: React.FC = () => {
usePrefetch({
logo: './assets/logo.png',
bg: './assets/background.png'
});
};
```
### `useWindowBounds`
Obtain width and height of a browser window and keep updating them.
```tsx
import { useWindowBounds } from 'microhooks';
const App: React.FC = () => {
const { width, height } = useWindowBounds();
return ;
};
```
### `useInlineSVG`
Thanks to the power of webpack, `useInlineSVG` can be used as a SVG container factory.
```tsx
import { useInlineSVG } from 'microhooks';
import LogoSVG from './assets/logo.svg';
const App: React.FC = () => {
const Logo = useInlineSVG(LogoSVG);
return (
<>
Heyyy
>
);
};
```
## Contribution
See [Contribution Guide](./CONTRIBUTING.md).