p5.js-web-editor/client/utils/custom-hooks.js

60 lines
1.8 KiB
JavaScript
Raw Normal View History

import React, { useEffect, useRef, useState } from 'react';
2020-07-20 22:08:03 +00:00
export const noop = () => {};
export const useDidUpdate = (callback, deps) => {
const hasMount = useRef(false);
useEffect(() => {
if (hasMount.current) {
callback();
} else {
hasMount.current = true;
}
}, deps);
};
2020-07-29 18:15:55 +00:00
2020-07-29 19:01:40 +00:00
// Usage: const ref = useModalBehavior(() => setSomeState(false))
// place this ref on a component
export const useModalBehavior = (hideOverlay) => {
2020-07-29 18:15:55 +00:00
const ref = useRef({});
2020-07-29 19:01:40 +00:00
// Return values
2020-07-29 18:15:55 +00:00
const setRef = (r) => { ref.current = r; };
2020-08-03 17:48:10 +00:00
const [visible, setVisible] = useState(false);
const trigger = () => setVisible(!visible);
2020-07-29 19:01:40 +00:00
const hide = () => setVisible(false);
2020-07-29 18:15:55 +00:00
const handleClickOutside = ({ target }) => {
if (ref && ref.current && !(ref.current.contains && ref.current.contains(target))) {
2020-07-29 19:01:40 +00:00
hide();
2020-07-29 18:15:55 +00:00
}
};
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, [ref]);
2020-07-29 19:01:40 +00:00
return [visible, trigger, setRef];
};
// Usage: useEffectWithComparison((props, prevProps) => { ... }, { prop1, prop2 })
// This hook basically applies useEffect but keeping track of the last value of relevant props
// So you can passa a 2-param function to capture new and old values and do whatever with them.
export const useEffectWithComparison = (fn, props) => {
const [prevProps, update] = useState({});
return useEffect(() => {
fn(props, prevProps);
update(props);
}, Object.values(props));
};
export const useEventListener = (event, callback, useCapture = false, list = []) => useEffect(() => {
document.addEventListener(event, callback, useCapture);
return () => document.removeEventListener(event, callback, useCapture);
}, list);