From 43b17187dab203ef5229e3185ab77ac401370d11 Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Fri, 20 Sep 2019 11:10:22 +0000 Subject: [PATCH] Travis build: 73 --- README.md | 104 ++++++++++++++++++++++++++++++++++ snippet_data/snippetList.json | 17 ++++++ snippet_data/snippets.json | 23 ++++++++ 3 files changed, 144 insertions(+) diff --git a/README.md b/README.md index 2d718ecfa..7d7888775 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,7 @@ import ReactDOM from 'react-dom'; View contents * [`Accordion`](#accordion-) +* [`Alert`](#alert) * [`AutoLink`](#autolink-) * [`Carousel`](#carousel) * [`Collapse`](#collapse) @@ -1143,6 +1144,109 @@ ReactDOM.render(
[⬆ Back to top](#contents) +### Alert + +Creates an alert component with `type` prop. + +- Define appropriate CSS styles and animations for the component's elements. +- Use the `React.setState()` 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.setEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted. +- Define `closeNotification` 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. + +```css +@keyframes leave { + 0% { opacity: 1 } + 100% { opacity: 0 } +} + +.alert { + padding: 0.75rem 0.5rem; + margin-bottom: 0.5rem; + text-align: left; + padding-right: 40px; + border-radius: 4px; + font-size: 16px; + position: relative; +} + +.alert.warning{ + color: #856404; + background-color: #fff3cd; + border-color: #ffeeba; +} + +.alert.error{ + color: #721c24; + background-color: #f8d7da; + border-color: #f5c6cb; +} + +.alert.leaving{ + animation: leave 0.5s forwards; +} + +.alert .close { + position: absolute; + top: 0; + right: 0; + padding: 0 0.75rem; + color: #333; + border: 0; + height: 100%; + cursor: pointer; + background: none; + font-weight: 600; + font-size: 16px; +} + +.alert .close:after{ + content: 'x'; +} +``` + +```jsx +function Notification(props) { + const [isShown, setIsShown] = React.useState(false); + const [isLeaving, setIsLeaving] = React.useState(false); + + let timeoutId = null; + + React.useEffect(() => { + setIsShown(true); + return () => { + clearTimeout(timeoutId); + } + }, [props.isShown, props.timeout, timeoutId]); + + const closeNotification = () => { + setIsLeaving(true); + timeoutId = setTimeout(() => { + setIsLeaving(false); + setIsShown(false); + }, 250) + } + + return isShown && ( +
+
+ ) +} +``` + +
+Examples + +```jsx +ReactDOM.render(, document.getElementById('root')); +``` +
+ +
[⬆ Back to top](#contents) + ### AutoLink ![advanced](/advanced.svg) Renders a string as plaintext, with URLs converted to appropriate `` elements. diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json index c73bf7359..c43ab6ed3 100644 --- a/snippet_data/snippetList.json +++ b/snippet_data/snippetList.json @@ -17,6 +17,23 @@ "hash": "b83c2546a50390dcda27afa3bd654fc6b70474e624cdd80ef6862f7d14c2c7c6" } }, + { + "id": "Alert", + "type": "snippetListing", + "title": "Alert", + "attributes": { + "text": "Creates an alert component with `type` prop.\n\n- Define appropriate CSS styles and animations for the component's elements.\n- Use the `React.setState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`.\n- Define `timeoutId` to keep the timer instance for clearing on component unmount.\n- Use the `React.setEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted.\n- Define `closeNotification` function to set the component is removed from DOM by displaying fading out animation and set `isShown` to `false` via `setTimeout()`. \n- Define the component, which renders the alert component with user defined `message` and a close button to remove the component from DOM.\n\n", + "tags": [ + "visual", + "beginner", + "state", + "effect" + ] + }, + "meta": { + "hash": "6a9a1148d22c55f24865ce2672a84222409769910a5e472ab80e353c61914ab8" + } + }, { "id": "AutoLink", "type": "snippetListing", diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json index 885b4d9d4..0a7a6dde8 100644 --- a/snippet_data/snippets.json +++ b/snippet_data/snippets.json @@ -23,6 +23,29 @@ "hash": "b83c2546a50390dcda27afa3bd654fc6b70474e624cdd80ef6862f7d14c2c7c6" } }, + { + "id": "Alert", + "title": "Alert", + "type": "snippet", + "attributes": { + "fileName": "Alert.md", + "text": "Creates an alert component with `type` prop.\n\n- Define appropriate CSS styles and animations for the component's elements.\n- Use the `React.setState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`.\n- Define `timeoutId` to keep the timer instance for clearing on component unmount.\n- Use the `React.setEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted.\n- Define `closeNotification` function to set the component is removed from DOM by displaying fading out animation and set `isShown` to `false` via `setTimeout()`. \n- Define the component, which renders the alert component with user defined `message` and a close button to remove the component from DOM.\n\n", + "codeBlocks": { + "style": "@keyframes leave {\n 0% { opacity: 1 }\n 100% { opacity: 0 }\n}\n\n.alert {\n padding: 0.75rem 0.5rem;\n margin-bottom: 0.5rem;\n text-align: left;\n padding-right: 40px;\n border-radius: 4px;\n font-size: 16px;\n position: relative;\n}\n\n.alert.warning{\n color: #856404;\n background-color: #fff3cd;\n border-color: #ffeeba;\n}\n\n.alert.error{\n color: #721c24;\n background-color: #f8d7da;\n border-color: #f5c6cb;\n}\n\n.alert.leaving{\n animation: leave 0.5s forwards;\n}\n\n.alert .close {\n position: absolute;\n top: 0;\n right: 0;\n padding: 0 0.75rem;\n color: #333;\n border: 0;\n height: 100%;\n cursor: pointer;\n background: none;\n font-weight: 600;\n font-size: 16px;\n}\n\n.alert .close:after{\n content: 'x';\n}", + "code": "function Notification(props) {\n const [isShown, setIsShown] = React.useState(false);\n const [isLeaving, setIsLeaving] = React.useState(false);\n\n let timeoutId = null;\n\n React.useEffect(() => {\n setIsShown(true);\n return () => {\n clearTimeout(timeoutId);\n }\n }, [props.isShown, props.timeout, timeoutId]);\n\n const closeNotification = () => {\n setIsLeaving(true);\n timeoutId = setTimeout(() => {\n setIsLeaving(false);\n setIsShown(false);\n }, 250)\n }\n\n return isShown && (\n
\n
\n )\n}", + "example": "ReactDOM.render(, document.getElementById('root'));" + }, + "tags": [ + "visual", + "beginner", + "state", + "effect" + ] + }, + "meta": { + "hash": "6a9a1148d22c55f24865ce2672a84222409769910a5e472ab80e353c61914ab8" + } + }, { "id": "AutoLink", "title": "AutoLink",