https://github.com/mikelpmc/my-hooks
Some react custom hooks made for fun
https://github.com/mikelpmc/my-hooks
custom-hooks hooks javascript react
Last synced: about 1 month ago
JSON representation
Some react custom hooks made for fun
- Host: GitHub
- URL: https://github.com/mikelpmc/my-hooks
- Owner: mikelpmc
- Created: 2020-03-15T12:04:28.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T10:13:38.000Z (over 2 years ago)
- Last Synced: 2025-03-20T18:59:35.591Z (about 1 month ago)
- Topics: custom-hooks, hooks, javascript, react
- Language: JavaScript
- Homepage:
- Size: 606 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## A collection of react custom hooks made for fun
### useSyncState
---
This hooks provides a persisted-synced state using localstorage and pub/sub pattern.
#### Features
💾 Persist state to `localstorage`
💻 Syncs data between tabs/browser windows
☁️ Share state between same key hooks
Example of use in a component:
```js
import createSyncState from './useSyncState';
const useCounterState = createSyncState('counter', 0);
const Display = () => {
const [counter, setCounter] = useCounterState();
return (
Counter: {counter}
setCounter(current => current + 1)}>
Increment
setCounter(current => current - 1)}>
Decrement
);
};
export default Display;
```
### useMatchMedia
---
This hook will inform you when any given breakpoint is matched using the `window.matchMedia`.
Example of use:
```js
import useMatchMedia from './useMatchMedia';
const Display = () => {
const matched = useMatchMedia([368, 768]);
return
Matched breakpoint: {matched};
};
```
### useFieldValidator
A hook to validate form input fields.
It already includes a couple of simple rules and you can also pass in custom ones.
The hook would "listen" to value changes so you would have to control the component as you would usually do with react.
It returns:
- isValid - boolean flag
- state - an object with the state of each validation rule
- registerField - a function to get the ref of the field
Example of use:
```js
import useFieldValidator, { RULES } from './useFieldValidator';
const customRule = value => value.length > 8;
const rules = [RULES.isNotEmpty, RULES.isValidEmail, customRule];
const Display = () => {
const [email, setEmail] = useState('');
const {isValid, state, registerField} = useFieldValidator(rules);
return (
State: {JSON.stringify(state, null, 4)}
IsValid: {isValid}
setEmail(ev.target.value)) />
)
}
```