React Boop
jsimport React from 'react';
import { useSpring } from 'react-spring';
// UPDATE this path to your copy of the hook!
// Source here: https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
import usePrefersReducedMotion from '@hooks/use-prefers-reduced-motion.hook';
function useBoop({
x = 0,
y = 0,
rotation = 0,
scale = 1,
timing = 150,
springConfig = {
tension: 300,
friction: 10,
},
}) {
const prefersReducedMotion = usePrefersReducedMotion();
const [isBooped, setIsBooped] = React.useState(false);
const style = useSpring({
transform: isBooped
? `translate(${x}px, ${y}px)
rotate(${rotation}deg)
scale(${scale})`
: `translate(0px, 0px)
rotate(0deg)
scale(1)`,
config: springConfig,
});
React.useEffect(() => {
if (!isBooped) {
return;
}
const timeoutId = window.setTimeout(() => {
setIsBooped(false);
}, timing);
return () => {
window.clearTimeout(timeoutId);
};
}, [isBooped]);
const trigger = React.useCallback(() => {
setIsBooped(true);
}, []);
let appliedStyle = prefersReducedMotion ? {} : style;
return [appliedStyle, trigger];
}
export default useBoop;import React from 'react';import { useSpring } from 'react-spring';// UPDATE this path to your copy of the hook!// Source here: https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motionimport usePrefersReducedMotion from '@hooks/use-prefers-reduced-motion.hook';function useBoop({ x = 0, y = 0, rotation = 0, scale = 1, timing = 150, springConfig = { tension: 300, friction: 10, },}) { const prefersReducedMotion = usePrefersReducedMotion(); const [isBooped, setIsBooped] = React.useState(false); const style = useSpring({ transform: isBooped ? `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${scale})` : `translate(0px, 0px) rotate(0deg) scale(1)`, config: springConfig, }); React.useEffect(() => { if (!isBooped) { return; } const timeoutId = window.setTimeout(() => { setIsBooped(false); }, timing); return () => { window.clearTimeout(timeoutId); }; }, [isBooped]); const trigger = React.useCallback(() => { setIsBooped(true); }, []); let appliedStyle = prefersReducedMotion ? {} : style; return [appliedStyle, trigger];}export default useBoop;
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}
/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}
.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}