Update snippets, clean up a bit

snippets/useClickInside.md

@@ -9,22 +9,6 @@ A hook that handles the event of clicking inside the wrapped component.
 - Use the `React.useEffect()` hook to append and clean up the `click` event.
 - Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.
 
-```css
-.click-box {
-  border: 2px dashed orangered;
-  height: 200px;
-  width: 400px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-p {
-  border: 2px solid blue;
-  padding: 16px;
-}
-```
-
 ```jsx
 const useClickInside = (ref, callback) => {
   const handleClick = e => {
@@ -32,26 +16,37 @@ const useClickInside = (ref, callback) => {
       callback();
     }
   };
-  useEffect(() => {
+  React.useEffect(() => {
     document.addEventListener('click', handleClick);
     return () => {
       document.removeEventListener('click', handleClick);
     };
   });
 };
-
-function ClickBox({ onClickInside }) {
-  const clickRef = useRef();
-  useClickInside(clickRef, onClickInside);
-  return (
-    <div className="click-box" ref={clickRef}>
-      <p>Hello Click Me Inside!</p>
-    </div>
-  );
-}
 ```
 
 ```jsx
+const ClickBox = ({ onClickInside }) => {
+  const clickRef = React.useRef();
+  useClickInside(clickRef, onClickInside);
+  return (
+    <div
+      className="click-box"
+      ref={clickRef}
+      style={{
+        border: '2px dashed orangered',
+        height: 200,
+        width: 400,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <p>Click inside this element</p>
+    </div>
+  );
+};
+
 ReactDOM.render(
   <ClickBox onClickInside={() => alert('click inside')} />,
   document.getElementById('root')

snippets/useClickOutside.md

@@ -9,22 +9,6 @@ A hook that handles the event of clicking outside of the wrapped component.
 - Use the `React.useEffect()` hook to append and clean up the `click` event.
 - Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.
 
-```css
-.click-box {
-  border: 2px dashed orangered;
-  height: 200px;
-  width: 400px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-p {
-  border: 2px solid blue;
-  padding: 16px;
-}
-```
-
 ```jsx
 const useClickOutside = (ref, callback) => {
   const handleClick = e => {
@@ -32,26 +16,37 @@ const useClickOutside = (ref, callback) => {
       callback();
     }
   };
-  useEffect(() => {
+  React.useEffect(() => {
     document.addEventListener('click', handleClick);
     return () => {
       document.removeEventListener('click', handleClick);
     };
   });
 };
-
-function ClickBox({ onClickOutside }) {
-  const clickRef = useRef();
-  useClickOutside(clickRef, onClickOutside);
-  return (
-    <div className="click-box" ref={clickRef}>
-      <p>Hello Click Me Inside!</p>
-    </div>
-  );
-}
 ```
 
 ```jsx
+const ClickBox = ({ onClickOutside }) => {
+  const clickRef = React.useRef();
+  useClickOutside(clickRef, onClickOutside);
+  return (
+    <div
+      className="click-box"
+      ref={clickRef}
+      style={{
+        border: '2px dashed orangered',
+        height: 200,
+        width: 400,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <p>Click out of this element</p>
+    </div>
+  );
+};
+
 ReactDOM.render(
   <ClickBox onClickOutside={() => alert('click outside')} />,
   document.getElementById('root')

snippets/useInterval.md

@@ -10,7 +10,6 @@ A hook that implements `setInterval` in a declarative manner.
 - Use the `React.useEffect()` hook to remember the latest callback.
 - Use the `Rect.useEffect()` hook to set up the interval and clean up.
 
-
 ```jsx
 const useInterval = (callback, delay) => {
   const savedCallback = React.useRef();
@@ -20,7 +19,7 @@ const useInterval = (callback, delay) => {
   }, [callback]);
 
   React.useEffect(() => {
-    function tick () {
+    function tick() {
       savedCallback.current();
     }
     if (delay !== null) {
@@ -32,19 +31,14 @@ const useInterval = (callback, delay) => {
 ```
 
 ```jsx
-const Timer = (props) => {
-  const [seconds,setSeconds] = React.useState(0);
+const Timer = props => {
+  const [seconds, setSeconds] = React.useState(0);
   useInterval(() => {
     setSeconds(seconds + 1);
   }, 1000);
 
-  return (
-    <p>{seconds}</p>
-  );
-}
+  return <p>{seconds}</p>;
+};
 
-ReactDOM.render(
-  <Timer />,
-  document.getElementById('root')
-);
+ReactDOM.render(<Timer />, document.getElementById('root'));
 ```

snippets/useTimeout.md

@@ -10,7 +10,6 @@ A hook that implements `setTimeout` in a declarative manner.
 - Use the `React.useEffect()` hook to remember the latest callback.
 - Use the `Rect.useEffect()` hook to set up the timeout and clean up.
 
-
 ```jsx
 const useTimeout = (callback, delay) => {
   const savedCallback = React.useRef();
@@ -20,7 +19,7 @@ const useTimeout = (callback, delay) => {
   }, [callback]);
 
   React.useEffect(() => {
-    function tick () {
+    function tick() {
       savedCallback.current();
     }
     if (delay !== null) {
@@ -32,19 +31,14 @@ const useTimeout = (callback, delay) => {
 ```
 
 ```jsx
-const OneSecondTimer = (props) => {
-  const [seconds,setSeconds] = React.useState(0);
+const OneSecondTimer = props => {
+  const [seconds, setSeconds] = React.useState(0);
   useTimeout(() => {
     setSeconds(seconds + 1);
   }, 1000);
 
-  return (
-    <p>{seconds}</p>
-  );
-}
+  return <p>{seconds}</p>;
+};
 
-ReactDOM.render(
-  <OneSecondTimer />,
-  document.getElementById('root')
-);
+ReactDOM.render(<OneSecondTimer />, document.getElementById('root'));
 ```