1jsimport React from 'react';
2import { useSpring } from 'react-spring';
3
4// UPDATE this path to your copy of the hook!
5// Source here: https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
6import usePrefersReducedMotion from '@hooks/use-prefers-reduced-motion.hook';
7
8function useBoop({
9 x = 0,
10 y = 0,
11 rotation = 0,
12 scale = 1,
13 timing = 150,
14 springConfig = {
15 tension: 300,
16 friction: 10,
17 },
18}) {
19 const prefersReducedMotion = usePrefersReducedMotion();
20
21 const [isBooped, setIsBooped] = React.useState(false);
22
23 const style = useSpring({
24 transform: isBooped
25 ? `translate(${x}px, ${y}px)
26 rotate(${rotation}deg)
27 scale(${scale})`
28 : `translate(0px, 0px)
29 rotate(0deg)
30 scale(1)`,
31 config: springConfig,
32 });
33
34 React.useEffect(() => {
35 if (!isBooped) {
36 return;
37 }
38
39 const timeoutId = window.setTimeout(() => {
40 setIsBooped(false);
41 }, timing);
42
43 return () => {
44 window.clearTimeout(timeoutId);
45 };
46 }, [isBooped]);
47
48 const trigger = React.useCallback(() => {
49 setIsBooped(true);
50 }, []);
51
52 let appliedStyle = prefersReducedMotion ? {} : style;
53
54 return [appliedStyle, trigger];
55}
56
57export 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;
58/**
59 * Reset the text fill color so that placeholder is visible
60 */
61.npm__react-simple-code-editor__textarea:empty {
62 -webkit-text-fill-color: inherit !important;
63}
64
65/**
66 * Hack to apply on some CSS on IE10 and IE11
67 */
68@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
69 /**
70 * IE doesn't support '-webkit-text-fill-color'
71 * So we use 'color: transparent' to make the text transparent on IE
72 * Unlike other browsers, it doesn't affect caret color in IE
73 */
74 .npm__react-simple-code-editor__textarea {
75 color: transparent !important;
76 }
77
78 .npm__react-simple-code-editor__textarea::selection {
79 background-color: #accef7 !important;
80 color: transparent !important;
81 }
82}
83