{ "data": [ { "id": "Accordion", "title": "Accordion", "type": "snippet", "attributes": { "fileName": "Accordion.md", "text": "Renders an accordion menu with multiple collapsible content components.\n\n- Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`.\n- Each `AccordionItem` component renders a `\n \n {props.children}\n \n \n );\n}\n\nfunction Accordion(props) {\n const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);\n\n const changeItem = itemIndex => {\n if (typeof props.onItemClick === 'function') props.onItemClick(itemIndex);\n if (itemIndex !== bindIndex) setBindIndex(itemIndex);\n };\n const items = props.children.filter(item => item.type.name === 'AccordionItem');\n\n return (\n
\n {items.map(({ props }) => (\n changeItem(props.index)}\n children={props.children}\n />\n ))}\n
\n );\n}", "example": "ReactDOM.render(\n \n \n Lorem ipsum\n \n \n Dolor sit amet\n \n ,\n document.getElementById('root')\n);" }, "tags": [ "visual", "children", "state", "advanced" ] }, "meta": { "hash": "b83c2546a50390dcda27afa3bd654fc6b70474e624cdd80ef6862f7d14c2c7c6", "firstSeen": "1566386637", "lastUpdated": "1568614478", "updateCount": 3 } }, { "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", "firstSeen": "1568715570", "lastUpdated": "1568951771", "updateCount": 4 } }, { "id": "AutoLink", "title": "AutoLink", "type": "snippet", "attributes": { "fileName": "AutoLink.md", "text": "Renders a string as plaintext, with URLs converted to appropriate `` elements.\n\n- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n- Return a `` with matched URLs rendered as `` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n", "codeBlocks": { "style": "", "code": "function AutoLink({ text }) {\n 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;\n\n return (\n \n {text.split(delimiter).map(word => {\n let match = word.match(delimiter);\n if (match) {\n let url = match[0];\n return {url};\n }\n return word;\n })}\n \n );\n}", "example": "ReactDOM.render(\n ,\n document.getElementById('root')\n);" }, "tags": [ "visual", "string", "fragment", "regexp", "advanced" ] }, "meta": { "hash": "922aeac82b3a5a51e05d84e1795a84eab79106d8052edb857a7cd7db6bf41917", "firstSeen": "1566386637", "lastUpdated": "1566387134", "updateCount": 4 } }, { "id": "Carousel", "title": "Carousel", "type": "snippet", "attributes": { "fileName": "Carousel.md", "text": "Renders a carousel component.\n\n- Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\n- Use an object, `style`, to hold the styles for the individual components.\n- Use the `React.useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\n- 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.\n- Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n", "codeBlocks": { "style": "", "code": "function Carousel(props) {\n const [active, setActive] = React.useState(0);\n let scrollInterval = null;\n const style = {\n carousel: {\n position: 'relative'\n },\n carouselItem: {\n position: 'absolute',\n visibility: 'hidden'\n },\n visible: {\n visibility: 'visible'\n }\n };\n React.useEffect(() => {\n scrollInterval = setTimeout(() => {\n const { carouselItems } = props;\n setActive((active + 1) % carouselItems.length);\n }, 2000);\n return () => clearTimeout(scrollInterval);\n });\n const { carouselItems, ...rest } = props;\n return (\n
\n {carouselItems.map((item, index) => {\n const activeStyle = active === index ? style.visible : {};\n return React.cloneElement(item, {\n ...rest,\n style: {\n ...style.carouselItem,\n ...activeStyle\n }\n });\n })}\n
\n );\n}", "example": "ReactDOM.render(\n carousel item 1,\n
carousel item 2
,\n
carousel item 3
\n ]}\n />,\n document.getElementById('root')\n);" }, "tags": [ "visual", "children", "state", "effect", "intermediate" ] }, "meta": { "hash": "4e224ce57a85a9061c065603496ae2a80db43d2ab7908d1c08c7dcbe5779a2d6", "firstSeen": "1566386637", "lastUpdated": "1568839108", "updateCount": 3 } }, { "id": "Collapse", "title": "Collapse", "type": "snippet", "attributes": { "fileName": "Collapse.md", "text": "Renders a component with collapsible content.\n\n- Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.\n- Use an object, `style`, to hold the styles for individual components and their states.\n- Use a `
` to wrap both the `\n \n {props.children}\n
\n \n );\n}", "example": "ReactDOM.render(\n \n

This is a collapse

\n

Hello world!

\n ,\n document.getElementById('root')\n);" }, "tags": [ "visual", "children", "state", "intermediate" ] }, "meta": { "hash": "d6efbb46da30a701cc691ad94b860fb6f0b34459e88caa8d744411734503af8f", "firstSeen": "1566386637", "lastUpdated": "1566386637", "updateCount": 2 } }, { "id": "ControlledInput", "title": "ControlledInput", "type": "snippet", "attributes": { "fileName": "ControlledInput.md", "text": "Renders an `` element with internal state, that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `` element.\n- Use the `React.setState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop.\n- Use the `React.useEffect()` hook with a second parameter set to the `value` state variable to call the `callback` function every time `value` is updated.\n- Render an `` element with the appropriate attributes and use the the `onChange` event to upda the `value` state variable.\n\n", "codeBlocks": { "style": "", "code": "function ControlledInput({\n callback,\n type = 'text',\n disabled = false,\n readOnly = false,\n defaultValue,\n placeholder = ''\n}) {\n const [value, setValue] = React.useState(defaultValue);\n\n React.useEffect(() => {\n callback(value);\n }, [value]);\n\n return (\n setValue(value)}\n />\n );\n}", "example": "ReactDOM.render(\n console.log(val)}\n />,\n document.getElementById('root')\n);" }, "tags": [ "input", "state", "effect", "intermediate" ] }, "meta": { "hash": "25ac64175964945e36212d776ef5192d54628e1d08561489a022765c45368692", "firstSeen": "1566386637", "lastUpdated": "1566386637", "updateCount": 2 } }, { "id": "CountDown", "title": "CountDown", "type": "snippet", "attributes": { "fileName": "CountDown.md", "text": "Renders a countdown timer that prints a message when it reaches zero.\n\n- Use object destructuring to set defaults for the `hours`, `minutes` and `seconds` props.\n- Use the `React.useState()` hook to create the `time`, `paused` and `over` state variables and set their values to the values of the passed props, `false` and `false` respectively.\n- Create a method `tick`, that updates the value of `time` based on the current value (i.e. decreasing the time by one second).\n- If `paused` or `over` is `true`, `tick` will return immediately.\n- Create a method `reset`, that resets all state variables to their initial states.\n- Use the the `React.useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to cleanup when the component is unmounted.\n- Use a `
` to wrap a `

` element with the textual representation of the components `time` state variable, as well as two `\n \n

\n );\n}", "example": "ReactDOM.render(, document.getElementById('root'));" }, "tags": [ "visual", "state", "advanced" ] }, "meta": { "hash": "fb5aeef0abd03d44daaff0bd027c7633fe4b079f07c13f2cb3166a56363453ef", "firstSeen": "1566386637", "lastUpdated": "1566386637", "updateCount": 2 } }, { "id": "DataList", "title": "DataList", "type": "snippet", "attributes": { "fileName": "DataList.md", "text": "Renders a list of elements from an array of primitives.\n\n- Use the value of the `isOrdered` prop to conditionally render a `
    ` or `
      ` list.\n- Use `Array.prototype.map` to render every item in `data` as a `
    • ` element, give it a `key` produced from the concatenation of the its index and value.\n- Omit the `isOrdered` prop to render a `
        ` list by default.\n\n", "codeBlocks": { "style": "", "code": "function DataList({ isOrdered, data }) {\n const list = data.map((val, i) =>
      • {val}
        • );\n return isOrdered ?
          {list}
        :
          {list}
        ;\n}", "example": "const names = ['John', 'Paul', 'Mary'];\nReactDOM.render(, document.getElementById('root'));\nReactDOM.render(, document.getElementById('root'));" }, "tags": [ "array", "beginner" ] }, "meta": { "hash": "9c5d1b4aee999583a6f01ef38b0060a2eedcb27e215246e0cf31a5e43e53c0f5", "firstSeen": "1566386637", "lastUpdated": "1566386637", "updateCount": 2 } }, { "id": "DataTable", "title": "DataTable", "type": "snippet", "attributes": { "fileName": "DataTable.md", "text": "Renders a table with rows dynamically created from an array of primitives.\n\n- Render a `` element with two columns (`ID` and `Value`).\n- Use `Array.prototype.map` to render every item in `data` as a `` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.\n\n", "codeBlocks": { "style": "", "code": "function DataTable({ data }) {\n return (\n
        \n \n \n \n \n \n \n \n {data.map((val, i) => (\n \n \n \n \n ))}\n \n
        IDValue
        {i}{val}
        \n );\n}", "example": "const people = ['John', 'Jesse'];\nReactDOM.render(, document.getElementById('root'));" }, "tags": [ "array", "beginner" ] }, "meta": { "hash": "1ad27574cfe29f8cce5410e7dd243d66edeea801037e3cd0ed1d24ecdbd5526e", "firstSeen": "1566386637", "lastUpdated": "1566386637", "updateCount": 2 } }, { "id": "FileDrop", "title": "FileDrop", "type": "snippet", "attributes": { "fileName": "FileDrop.md", "text": "Renders a file drag and drop component for a single file.\n\n- Create a ref called `dropRef` for this component.\n- Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.\n The variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.\n- Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.\n- Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.\n- `handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.\n- Return an appropriately styled `
        ` and use `drag` and `filename` to determine its contents and style.\n- Finally, bind the `ref` of the created `
        ` to `dropRef`.\n\n", "codeBlocks": { "style": ".filedrop {\n min-height: 120px;\n border: 3px solid #d3d3d3;\n text-align: center;\n font-size: 24px;\n padding: 32px;\n border-radius: 4px;\n}\n\n.filedrop.drag {\n border: 3px dashed #1e90ff;\n}\n\n.filedrop.ready {\n border: 3px solid #32cd32;\n}", "code": "function FileDrop(props) {\n const [drag, setDrag] = React.useState(false);\n const [filename, setFilename] = React.useState('');\n let dropRef = React.createRef();\n let dragCounter = 0;\n\n const handleDrag = e => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleDragIn = e => {\n e.preventDefault();\n e.stopPropagation();\n dragCounter++;\n if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);\n };\n\n const handleDragOut = e => {\n e.preventDefault();\n e.stopPropagation();\n dragCounter--;\n if (dragCounter === 0) setDrag(false);\n };\n\n const handleDrop = e => {\n e.preventDefault();\n e.stopPropagation();\n setDrag(false);\n if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n props.handleDrop(e.dataTransfer.files[0]);\n setFilename(e.dataTransfer.files[0].name);\n e.dataTransfer.clearData();\n dragCounter = 0;\n }\n };\n\n React.useEffect(() => {\n let div = dropRef.current;\n div.addEventListener('dragenter', handleDragIn);\n div.addEventListener('dragleave', handleDragOut);\n div.addEventListener('dragover', handleDrag);\n div.addEventListener('drop', handleDrop);\n return function cleanup() {\n div.removeEventListener('dragenter', handleDragIn);\n div.removeEventListener('dragleave', handleDragOut);\n div.removeEventListener('dragover', handleDrag);\n div.removeEventListener('drop', handleDrop);\n };\n });\n\n return (\n \n {filename && !drag ?
        {filename}
        :
        Drop files here!
        }\n
        \n );\n}", "example": "ReactDOM.render(, document.getElementById('root'));" }, "tags": [ "visual", "input", "state", "effect", "event", "intermediate" ] }, "meta": { "hash": "083b5e03f65112796bebc1fb5b8db99c7cd7ff16a11cca192ad18ea5db5c7e30", "firstSeen": "1566386637", "lastUpdated": "1566386637", "updateCount": 2 } }, { "id": "LimitedTextarea", "title": "LimitedTextarea", "type": "snippet", "attributes": { "fileName": "LimitedTextarea.md", "text": "Renders a textarea component with a character limit.\n\n- Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.\n Create a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.\n- Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\n- Use a`
        ` to wrap both the`