react boop

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