diff --git a/snippets/Alert.md b/snippets/Alert.md index 4f867ba85..b2fa67aed 100644 --- a/snippets/Alert.md +++ b/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 `React.useState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`. +- Use the `useState()` hook to create the `isShown` and `isLeaving` state variables and set both to `false` intially. - 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. -- Define `closeAlert` function to set the component is removed from DOM by displaying 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. +- 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 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()`. ```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 ( + isShown && ( +
+
+ ) ); }; ``` ```jsx -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( + , + document.getElementById('root') +); ``` diff --git a/snippets/AutoLink.md b/snippets/AutoLink.md index a7785c6b3..6ca08c913 100644 --- a/snippets/AutoLink.md +++ b/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 `` 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 `` with matched URLs rendered as `` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext. +- Return matched URLs rendered as `` 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 ( - + <> {text.split(delimiter).map(word => { - let match = word.match(delimiter); + const match = word.match(delimiter); if (match) { - let url = match[0]; - return {url}; + const url = match[0]; + return ( + {url} + ); } return word; })} - + ); }; ``` diff --git a/snippets/Carousel.md b/snippets/Carousel.md index 6be833ddf..0af6b189e 100644 --- a/snippets/Carousel.md +++ b/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 an object, `style`, to hold the styles for the individual components. -- Use the `React.useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`. -- 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 `props` along with the computed styles. +- Use the `useState()` hook to create the `active` state variable and give it a value of `0` (index of the first item). +- Use the `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. +- Render the carousel items using `React.cloneElement()` and pass down `...rest` along with the computed `className`. + +```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 ( -
+
{carouselItems.map((item, index) => { - const activeStyle = active === index ? style.visible : {}; + const activeClass = active === index ? ' visible' : ''; return React.cloneElement(item, { ...rest, - style: { - ...style.carouselItem, - ...activeStyle - } + className: `carousel-item${activeClass}` }); })}
diff --git a/snippets/Collapse.md b/snippets/Collapse.md index 58355fdf4..0f5235b97 100644 --- a/snippets/Collapse.md +++ b/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 an object, `style`, to hold the styles for individual components and their states. -- Use a `
` to wrap both the `
{children}
-
+ ); }; ```