Update snippets

snippets/Alert.md

@@ -3,14 +3,12 @@ title: Alert
 tags: components,state,effect,beginner
 ---
 
-Creates an alert component with `type` prop.
+Renders an alert component with `type` prop.
 
-- Define appropriate CSS styles and animations for the component's elements.
+- Use the `useState()` hook to create the `isShown` and `isLeaving` state variables and set both to `false` intially.
-- Use the `React.useState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`.
 - Define `timeoutId` to keep the timer instance for clearing on component unmount.
-- Use the `React.useEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted.
+- Use the `useEffect()` hook to update the value of `isShown` to `true` and clear the interval by using `timeoutId` when the component is unmounted.
-- Define `closeAlert` function to set the component is removed from DOM by displaying fading out animation and set `isShown` to `false` via `setTimeout()`.
+- Define a `closeAlert` function to set the component as removed from the DOM by displaying a fading out animation and set `isShown` to `false` via `setTimeout()`.
-- Define the component, which renders the alert component with user defined `message` and a close button to remove the component from DOM.
 
 ```css
 @keyframes leave {
@@ -28,19 +26,19 @@ Creates an alert component with `type` prop.
   position: relative;
 }
 
-.alert.warning{
+.alert.warning {
   color: #856404;
   background-color: #fff3cd;
   border-color: #ffeeba;
 }
 
-.alert.error{
+.alert.error {
   color: #721c24;
   background-color: #f8d7da;
   border-color: #f5c6cb;
 }
 
-.alert.leaving{
+.alert.leaving {
   animation: leave 0.5s forwards;
 }
 
@@ -58,7 +56,7 @@ Creates an alert component with `type` prop.
   font-size: 16px;
 }
 
-.alert .close:after{
+.alert .close:after {
   content: 'x';
 }
 ```
@@ -85,15 +83,23 @@ const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => {
     }, timeout);
   };
 
-  return isShown && (
+  return (
-    <div className={`alert ${type} ${isLeaving ? 'leaving' : ''}`} role="alert">
+    isShown && (
+      <div
+        className={`alert ${type} ${isLeaving ? 'leaving' : ''}`}
+        role="alert"
+      >
         <button className="close" onClick={closeAlert} />
         {message}
       </div>
+    )
   );
 };
 ```
 
 ```jsx
-ReactDOM.render(<Alert type="info" message="This is info" />, document.getElementById('root'));
+ReactDOM.render(
+  <Alert type="info" message="This is info" />,
+  document.getElementById('root')
+);
 ```

snippets/AutoLink.md

@@ -1,28 +1,31 @@
 ---
 title: AutoLink
-tags: components,string,fragment,regexp,advanced
+tags: components,fragment,regexp,intermediate
 ---
 
-Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
+Renders a string as plaintext, with URLs converted to appropriate link elements.
 
 - Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
-- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.
+- Return matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary.
+- Render the rest of the string as plaintext.
 
 ```jsx
 const AutoLink = ({ text }) => {
   const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;
 
   return (
-    <React.Fragment>
+    <>
       {text.split(delimiter).map(word => {
-        let match = word.match(delimiter);
+        const match = word.match(delimiter);
         if (match) {
-          let url = match[0];
+          const url = match[0];
-          return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;
+          return (
+            <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>
+          );
         }
         return word;
       })}
-    </React.Fragment>
+    </>
   );
 };
 ```

snippets/Carousel.md

@@ -1,32 +1,35 @@
 ---
 title: Carousel
-tags: components,children,state,effect,intermediate
+tags: components,children,state,effect,advanced
 ---
 
 Renders a carousel component.
 
-- Use the `React.useState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
+- Use the `useState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
-- Use an object, `style`, to hold the styles for the individual components.
+- Use the `useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
-- Use the `React.useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
+- Compute the `className` for each carousel item while mapping over them and applying it accordingly.
-- Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
+- Render the carousel items using `React.cloneElement()` and pass down `...rest` along with the computed `className`.
-- Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
+
+```css
+.carousel {
+  position: relative;
+}
+
+.carousel-item {
+  position: absolute;
+  visibility: hidden;
+}
+
+.carousel-item.visible {
+  visibility: visible;
+}
+```
 
 ```jsx
 const Carousel = ({ carouselItems, ...rest }) => {
   const [active, setActive] = React.useState(0);
   let scrollInterval = null;
-  const style = {
+
-    carousel: {
-      position: 'relative'
-    },
-    carouselItem: {
-      position: 'absolute',
-      visibility: 'hidden'
-    },
-    visible: {
-      visibility: 'visible'
-    }
-  };
   React.useEffect(() => {
     scrollInterval = setTimeout(() => {
       setActive((active + 1) % carouselItems.length);
@@ -35,15 +38,12 @@ const Carousel = ({ carouselItems, ...rest }) => {
   });
 
   return (
-    <div style={style.carousel}>
+    <div className="carousel">
       {carouselItems.map((item, index) => {
-        const activeStyle = active === index ? style.visible : {};
+        const activeClass = active === index ? ' visible' : '';
         return React.cloneElement(item, {
           ...rest,
-          style: {
+          className: `carousel-item${activeClass}`
-            ...style.carouselItem,
-            ...activeStyle
-          }
         });
       })}
     </div>

snippets/Collapse.md

@@ -1,46 +1,49 @@
 ---
 title: Collapse
-tags: components,children,state,intermediate
+tags: components,children,state,beginner
 ---
 
 Renders a component with collapsible content.
 
-- Use the `React.useState()` hook to create the `isCollapsed` state variable with an initial value of `collapsed`.
+- Use the `useState()` hook to create the `isCollapsed` state variable with an initial value of `collapsed`.
-- Use an object, `style`, to hold the styles for individual components and their states.
+- Use the `<button>` to change the component's `isCollapsed` state and the content of the component, passed down via `children`.
-- Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `children`.
+- Determine the appearance of the content, based on `isCollapsed` and apply the appropriate `className`.
-- Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.
+- Update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
-- Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
+
+```css
+.collapse-button {
+  display: block;
+  width: 100%;
+}
+
+.collapse-content.collapsed {
+  display: none;
+}
+
+.collapsed-content.expanded {
+  display: block;
+}
+```
 
 ```jsx
 const Collapse = ({ collapsed, children }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
 
-  const style = {
-    collapsed: {
-      display: 'none'
-    },
-    expanded: {
-      display: 'block'
-    },
-    buttonStyle: {
-      display: 'block',
-      width: '100%'
-    }
-  };
-
   return (
-    <div>
+    <>
-      <button style={style.buttonStyle} onClick={() => setIsCollapsed(!isCollapsed)}>
+      <button
+        className="collapse-button"
+        onClick={() => setIsCollapsed(!isCollapsed)}
+      >
         {isCollapsed ? 'Show' : 'Hide'} content
       </button>
       <div
-        className="collapse-content"
+        className={`collapse-content ${isCollapsed ? 'collapsed' : 'expanded'}`}
-        style={isCollapsed ? style.collapsed : style.expanded}
         aria-expanded={isCollapsed}
       >
         {children}
       </div>
-    </div>
+    </>
   );
 };
 ```