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
• useLockBodyScroll
• useArray
• useDebounce
• useWindowSize
• useQueryStringState
• 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

1import { useOutsideClick } from 'moment-hooks';
2
3const ref = React.useRef();
4useOutsideClick(ref, () => console.log("On click outside"));

useArray

makes handling of state array easier

Parameters

1. The initial value of the array

1import { useArray } from 'moment-hooks';
2
3const [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.

1import { useLockBodyScroll } from 'moment-hooks';
2
3useLockBodyScroll();

or if you have it in a modal

1import { useLockBodyScroll } from 'moment-hooks';
2
3const Modal = ({ isOpen }) => {
4    useLockBodyScroll(isOpen);
5
6    return <div>Modal</div>;
7}

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

1import { useDebounce } from 'moment-hooks';
2
3const [inputValue, setInputValue] = React.useState("A value");
4const debouncedInputValue = useDebounce(inputValue, 100);

useWindowSize

returns the size of the window

1import { useWindowSize } from 'moment-hooks';
2
3const { width, height } = useWindowSize();

useSize

returns the size of the reference

1import { useSize } from 'moment-hooks';
2
3const { 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.

1const [reportSettings, setReportSettings] = useQueryStringState(
2        {
3            from: moment()
4                .subtract(1, 'months')
5                .toDate(),
6            to: moment().toDate(),
7        },
8        {
9            fromString: {
10                from: from => moment(from).toDate(),
11                to: to => moment(to).toDate(),
12            },
13            toString: {
14                from: from => moment(from).format(),
15                to: to => moment(to).format(),
16            },
17        }
18    );

useWhyDidYouUpdate

logs the reason why a component has been updated

Parameters

1. The name of the component
2. The props

1import { useWhyDidYouUpdate } from 'moment-hooks';
2
3useWhyDidYouUpdate('Register', props);