diff --git a/snippets/Accordion.md b/snippets/Accordion.md index 9d9ab94f3..78402e23e 100644 --- a/snippets/Accordion.md +++ b/snippets/Accordion.md @@ -1,4 +1,7 @@ -### Accordion +--- +title: Accordion +tags: visual,children,state,advanced +--- Renders an accordion menu with multiple collapsible content components. @@ -77,7 +80,3 @@ ReactDOM.render( document.getElementById('root') ); ``` - - - - diff --git a/snippets/AutoLink.md b/snippets/AutoLink.md index 2b75bed5a..abcc7ec0f 100644 --- a/snippets/AutoLink.md +++ b/snippets/AutoLink.md @@ -1,4 +1,7 @@ -### AutoLink +--- +title: AutoLink +tags: string,fragment,regexp,advanced +--- Renders a string as plaintext, with URLs converted to appropriate `` elements. @@ -30,7 +33,3 @@ ReactDOM.render( document.getElementById('root') ); ``` - - - - diff --git a/snippets/Carousel.md b/snippets/Carousel.md index 1d3656b26..e757f25a7 100644 --- a/snippets/Carousel.md +++ b/snippets/Carousel.md @@ -1,4 +1,7 @@ -### Carousel +--- +title: Carousel +tags: visual,children,state,effect,intermediate +--- Renders a carousel component. @@ -60,7 +63,3 @@ ReactDOM.render( document.getElementById('root') ); ``` - - - - diff --git a/snippets/ClickOutAndInside.md b/snippets/ClickOutAndInside.md index bb1382b0b..06b9bff10 100644 --- a/snippets/ClickOutAndInside.md +++ b/snippets/ClickOutAndInside.md @@ -1,4 +1,7 @@ -### ClickInside and ClickOutside +--- +title: ClickInside and ClickOutside +tags: hooks,effect,event,intermediate +--- Two handy hooks to handle the click outside and inside event on the wrapped component. diff --git a/snippets/Collapse.md b/snippets/Collapse.md index 825697494..2d77a3a76 100644 --- a/snippets/Collapse.md +++ b/snippets/Collapse.md @@ -1,4 +1,7 @@ -### Collapse +--- +title: Collapse +tags: visual,children,state,intermediate +--- Renders a component with collapsible content. @@ -51,7 +54,3 @@ ReactDOM.render( document.getElementById('root') ); ``` - - - - diff --git a/snippets/CountDown.md b/snippets/CountDown.md index ef40c73b6..2611c3e48 100644 --- a/snippets/CountDown.md +++ b/snippets/CountDown.md @@ -1,4 +1,7 @@ -### CountDown +--- +title: CountDown +tags: visual,state,advanced +--- Renders a countdown timer that prints a message when it reaches zero. @@ -75,7 +78,3 @@ function CountDown({ hours = 0, minutes = 0, seconds = 0 }) { ```jsx ReactDOM.render(, document.getElementById('root')); ``` - - - - diff --git a/snippets/DataList.md b/snippets/DataList.md index fdeeb8c21..a38f7ab5e 100644 --- a/snippets/DataList.md +++ b/snippets/DataList.md @@ -1,4 +1,7 @@ -### DataList +--- +title: DataList +tags: array,beginner +--- Renders a list of elements from an array of primitives. @@ -18,7 +21,3 @@ const names = ['John', 'Paul', 'Mary']; ReactDOM.render(, document.getElementById('root')); ReactDOM.render(, document.getElementById('root')); ``` - - - - diff --git a/snippets/DataTable.md b/snippets/DataTable.md index d86402001..c50e5c096 100644 --- a/snippets/DataTable.md +++ b/snippets/DataTable.md @@ -1,4 +1,7 @@ -### DataTable +--- +title: DataTable +tags: array,beginner +--- Renders a table with rows dynamically created from an array of primitives. @@ -32,7 +35,3 @@ function DataTable({ data }) { const people = ['John', 'Jesse']; ReactDOM.render(, document.getElementById('root')); ``` - - - - diff --git a/snippets/FileDrop.md b/snippets/FileDrop.md index a45e3fa31..4af5c4e91 100644 --- a/snippets/FileDrop.md +++ b/snippets/FileDrop.md @@ -1,4 +1,7 @@ -### FileDrop +--- +title: FileDrop +tags: visual,input,state,effect,event,intermediate +--- Renders a file drag and drop component for a single file. @@ -96,7 +99,3 @@ function FileDrop(props) { ```jsx ReactDOM.render(, document.getElementById('root')); ``` - - - - diff --git a/snippets/LimitedTextarea.md b/snippets/LimitedTextarea.md index fefd0b345..cf1d86676 100644 --- a/snippets/LimitedTextarea.md +++ b/snippets/LimitedTextarea.md @@ -1,4 +1,7 @@ -### LimitedTextarea +--- +title: LimitedTextarea +tags: input,state,effect,event,beginner +--- Renders a textarea component with a character limit. @@ -38,7 +41,3 @@ function LimitedTextarea({ rows, cols, value, limit }) { ```jsx ReactDOM.render(, document.getElementById('root')); ``` - - - - diff --git a/snippets/LimitedWordTextarea.md b/snippets/LimitedWordTextarea.md index fe796389c..7848b4b36 100644 --- a/snippets/LimitedWordTextarea.md +++ b/snippets/LimitedWordTextarea.md @@ -1,4 +1,7 @@ -### LimitedWordTextarea +--- +title: LimitedWordTextarea +tags: input,state,effect,event,beginner +--- Renders a textarea component with a word limit. @@ -55,7 +58,3 @@ ReactDOM.render( document.getElementById('root') ); ``` - - - - diff --git a/snippets/Mailto.md b/snippets/Mailto.md index 82644a8ce..08463d1f3 100644 --- a/snippets/Mailto.md +++ b/snippets/Mailto.md @@ -1,4 +1,7 @@ -### Mailto +--- +title: Mailto +tags: viual,beginner +--- Renders a link formatted to send an email. @@ -21,7 +24,3 @@ ReactDOM.render( document.getElementById('root') ); ``` - - - - diff --git a/snippets/MappedTable.md b/snippets/MappedTable.md index 59cc8a214..3e4101e35 100644 --- a/snippets/MappedTable.md +++ b/snippets/MappedTable.md @@ -1,4 +1,7 @@ -### MappedTable +--- +title: MappedTable +tags: array,object,intermediate +--- Renders a table with rows dynamically created from an array of objects and a list of property names. @@ -7,6 +10,8 @@ Renders a table with rows dynamically created from an array of objects and a lis * Use `Array.prototype.map` to render each value in the `propertyNames` array as a `` element. * Use `Array.prototype.map` to render each object in the `filteredData` array as a `` element, containing a `` for each key in the object. +*This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`* + ```jsx function MappedTable({ data, propertyNames }) { let filteredData = data.map(v => @@ -48,11 +53,3 @@ ReactDOM.render( document.getElementById('root') ); ``` - -#### Notes: - -- This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`. - - - - diff --git a/snippets/Modal.md b/snippets/Modal.md index 1fe98ccf4..de7911511 100644 --- a/snippets/Modal.md +++ b/snippets/Modal.md @@ -1,4 +1,7 @@ -### Modal +--- +title: Modal +tags: visual,effect,intermediate +--- Renders a Modal component, controllable through events. To use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute. @@ -131,7 +134,3 @@ function App() { ReactDOM.render( , document.getElementById('root')); ``` - - - - diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index b335ad37d..c3f38e835 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -1,4 +1,7 @@ -### MultiselectCheckbox +--- +title: MultiselectCheckbox +tags: input,state,array,intermediate +--- Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component. @@ -58,7 +61,3 @@ ReactDOM.render( document.getElementById('root') ); ``` - - - - diff --git a/snippets/PasswordRevealer.md b/snippets/PasswordRevealer.md index ba32a3a6b..723a165fb 100644 --- a/snippets/PasswordRevealer.md +++ b/snippets/PasswordRevealer.md @@ -1,4 +1,7 @@ -### PasswordRevealer +--- +title: PasswordRevealer +tags: input,state,beginner +--- Renders a password input field with a reveal button. @@ -21,7 +24,3 @@ function PasswordRevealer({ value }) { ```jsx ReactDOM.render(, document.getElementById('root')); ``` - - - - diff --git a/snippets/Select.md b/snippets/Select.md index 010d5cd4e..89ce82757 100644 --- a/snippets/Select.md +++ b/snippets/Select.md @@ -1,4 +1,7 @@ -### Select +--- +title: Select +tags: input,beginner +--- Renders a `