Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/momentechnologies/moment-hooks
A group of useful hooks for react
https://github.com/momentechnologies/moment-hooks
hooks
Last synced: about 1 month ago
JSON representation
A group of useful hooks for react
- Host: GitHub
- URL: https://github.com/momentechnologies/moment-hooks
- Owner: momentechnologies
- License: mit
- Created: 2019-08-16T16:25:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-24T20:37:11.000Z (over 1 year ago)
- Last Synced: 2024-07-23T17:53:15.636Z (5 months ago)
- Topics: hooks
- Language: TypeScript
- Homepage:
- Size: 686 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-react-hooks - `moment-hooks`
- awesome-react-hooks-cn - `moment-hooks`
- awesome-react-hooks - `moment-hooks`
- awesome-react-hooks - `moment-hooks`
README
[](https://badge.fury.io/js/moment-hooks)
[](https://opensource.org/licenses/MIT)
# moment-hooks
A module to group all the best hooks togheter.
## Prerequisites
- React 16.8 or greater
## Install
```
yarn install moment-hooks
```
# List of hooks
- [useOutsideClick](#useOutsideClick)
- [useLockBodyScroll](#useLockBodyScroll)
- [useArray](#useArray)
- [useDebounce](#useDebounce)
- [useWindowSize](#useWindowSize)
- [useQueryStringState](#useQueryStringState)
- [useWhyDidYouUpdate](#useWhyDidYouUpdate)
## useOutsideClick
calls a function when a click occurs on the outside of the ref element
### Parameters
1. The ref of the element
2. The function that is called when a click occurs outside the ref
```Javascript
import { useOutsideClick } from 'moment-hooks';
const ref = React.useRef();
useOutsideClick(ref, () => console.log("On click outside"));
```
## useArray
makes handling of state array easier
### Parameters
1. The initial value of the array
```Javascript
import { useArray } from 'moment-hooks';
const [list, actions] = useArray(["element 1"]);
```
### Return
the hook returns an array with two elements
1. The array stored in state
2. The actions you can do on the array
#### Actions
1. push - Adds the first parameter of the funtion to the end of the array
2. removeIndex - Removes the element at the index provided as the first parameter of the function
## useLockBodyScroll
Disables the scroll on body. Widely used in modals.
###Parameters
1. If it should be hidden. Defaults to true.
```Javascript
import { useLockBodyScroll } from 'moment-hooks';
useLockBodyScroll();
```
or if you have it in a modal
```Javascript
import { useLockBodyScroll } from 'moment-hooks';
const Modal = ({ isOpen }) => {
useLockBodyScroll(isOpen);
return
Modal;
}
```
## useDebounce
Reduce the amount of time is updated. Useful when dealing with fetch.
### Parameters
1. The value to debounce
2. The debounce delay in milliseconds. This is the time where no update must ocure to inputValue in order for the
debounced value to be updated
```Javascript
import { useDebounce } from 'moment-hooks';
const [inputValue, setInputValue] = React.useState("A value");
const debouncedInputValue = useDebounce(inputValue, 100);
```
## useWindowSize
returns the size of the window
```Javascript
import { useWindowSize } from 'moment-hooks';
const { width, height } = useWindowSize();
```
## useSize
returns the size of the reference
```Javascript
import { useSize } from 'moment-hooks';
const { width, height } = useSize();
```
### Parameters
1. ref: a React ref
## useQueryStringState
Works the same as useState just that it stores it's state in the querystring of the url.
### Parameters
1. defaultState: Exactly the same as the default state of useState
2. Object with 2 keys:
#### fromString
A way to serialize the url string to a value in the state
#### toString
A way to stringify the state.
```Javascript
const [reportSettings, setReportSettings] = useQueryStringState(
{
from: moment()
.subtract(1, 'months')
.toDate(),
to: moment().toDate(),
},
{
fromString: {
from: from => moment(from).toDate(),
to: to => moment(to).toDate(),
},
toString: {
from: from => moment(from).format(),
to: to => moment(to).format(),
},
}
);
```
## useWhyDidYouUpdate
logs the reason why a component has been updated
### Parameters
1. The name of the component
2. The props
```Javascript
import { useWhyDidYouUpdate } from 'moment-hooks';
useWhyDidYouUpdate('Register', props);
```