andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update frontmatter data

Browse Source
This commit is contained in:
Angelos Chalaris
2023-04-28 22:19:13 +03:00
parent 6d5cd56327
commit 7efb072407
78 changed files with 234 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/accordion.md
View File

@ -1,9 +1,9 @@
--- ---
title: Collapsible accordion title: Collapsible accordion
tags: components,children,state type: snippet
tags: [components,children,state]
cover: beach-pineapple cover: beach-pineapple
firstSeen: 2019-03-02T10:46:34+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders an accordion menu with multiple collapsible content elements. Renders an accordion menu with multiple collapsible content elements.

6
snippets/alert.md
View File

@ -1,9 +1,9 @@
--- ---
title: Closable alert title: Closable alert
tags: components,state,effect type: snippet
tags: [components,state,effect]
cover: flower-portrait-1 cover: flower-portrait-1
firstSeen: 2019-09-17T13:19:30+03:00 dateModified: 2021-01-07T23:57:13+02:00
lastUpdated: 2021-01-07T23:57:13+02:00
--- ---
Renders an alert component with `type` prop. Renders an alert component with `type` prop.

6
snippets/auto-link.md
View File

@ -1,10 +1,10 @@
--- ---
title: Automatic text linking title: Automatic text linking
tags: components,fragment,regexp type: snippet
tags: [components,fragment,regexp]
author: chalarangelo author: chalarangelo
cover: red-petals cover: red-petals
firstSeen: 2018-12-05T15:04:49+02:00 dateModified: 2020-11-03T20:42:15+02:00
lastUpdated: 2020-11-03T20:42:15+02:00
--- ---
Renders a string as plaintext, with URLs converted to appropriate link elements. Renders a string as plaintext, with URLs converted to appropriate link elements.

6
snippets/callto.md
View File

@ -1,11 +1,11 @@
--- ---
title: Callable telephone link title: Callable telephone link
tags: components type: snippet
tags: [components]
author: chalarangelo author: chalarangelo
unlisted: true unlisted: true
cover: rabbit-call cover: rabbit-call
firstSeen: 2020-10-04T00:07:37+03:00 dateModified: 2021-01-04T12:32:47+02:00
lastUpdated: 2021-01-04T12:32:47+02:00
--- ---
Renders a link formatted to call a phone number (`tel:` link). Renders a link formatted to call a phone number (`tel:` link).

6
snippets/carousel.md
View File

@ -1,9 +1,9 @@
--- ---
title: Carousel title: Carousel
tags: components,children,state,effect type: snippet
tags: [components,children,state,effect]
cover: shell-focus cover: shell-focus
firstSeen: 2018-11-13T21:24:55+02:00 dateModified: 2020-11-03T20:42:15+02:00
lastUpdated: 2020-11-03T20:42:15+02:00
--- ---
Renders a carousel component. Renders a carousel component.

6
snippets/collapse.md
View File

@ -1,9 +1,9 @@
--- ---
title: Collapsible content title: Collapsible content
tags: components,children,state type: snippet
tags: [components,children,state]
cover: washed-ashore cover: washed-ashore
firstSeen: 2018-10-17T20:42:23+03:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a component with collapsible content. Renders a component with collapsible content.

6
snippets/controlled-input.md
View File

@ -1,9 +1,9 @@
--- ---
title: Controlled input field title: Controlled input field
tags: components,input type: snippet
tags: [components,input]
cover: digital-nomad-5 cover: digital-nomad-5
firstSeen: 2019-08-21T13:09:10+03:00 dateModified: 2020-11-03T21:08:39+02:00
lastUpdated: 2020-11-03T21:08:39+02:00
--- ---
Renders a controlled `<input>` element that uses a callback function to inform its parent about value updates. Renders a controlled `<input>` element that uses a callback function to inform its parent about value updates.

6
snippets/count-down.md
View File

@ -1,9 +1,9 @@
--- ---
title: Countdown timer title: Countdown timer
tags: components,state type: snippet
tags: [components,state]
cover: sea-view-2 cover: sea-view-2
firstSeen: 2019-02-06T14:39:31+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a countdown timer that prints a message when it reaches zero. Renders a countdown timer that prints a message when it reaches zero.

6
snippets/data-list.md
View File

@ -1,9 +1,9 @@
--- ---
title: Data list title: Data list
tags: components type: snippet
tags: [components]
cover: interior-14 cover: interior-14
firstSeen: 2018-11-29T12:12:24+02:00 dateModified: 2020-11-03T21:26:34+02:00
lastUpdated: 2020-11-03T21:26:34+02:00
--- ---
Renders a list of elements from an array of primitives. Renders a list of elements from an array of primitives.

6
snippets/data-table.md
View File

@ -1,9 +1,9 @@
--- ---
title: Data table title: Data table
tags: components type: snippet
tags: [components]
cover: armchair cover: armchair
firstSeen: 2018-11-29T11:13:59+02:00 dateModified: 2020-11-03T21:26:34+02:00
lastUpdated: 2020-11-03T21:26:34+02:00
--- ---
Renders a table with rows dynamically created from an array of primitives. Renders a table with rows dynamically created from an array of primitives.

6
snippets/file-drop.md
View File

@ -1,10 +1,10 @@
--- ---
title: File drag and drop area title: File drag and drop area
tags: components,input,state,effect,event type: snippet
tags: [components,input,state,effect,event]
author: chalarangelo author: chalarangelo
cover: man-red-sunset cover: man-red-sunset
firstSeen: 2019-02-02T12:17:27+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a file drag and drop component for a single file. Renders a file drag and drop component for a single file.

5
snippets/lazy-load-image.md
View File

@ -1,9 +1,10 @@
--- ---
title: Lazy-loading image title: Lazy-loading image
tags: components,effect,state type: snippet
tags: [components,effect,state]
cover: strawberries cover: strawberries
author: chalarangelo author: chalarangelo
firstSeen: 2022-07-29T05:00:00-04:00 dateModified: 2022-07-29T05:00:00-04:00
--- ---
Renders an image that supports lazy loading. Renders an image that supports lazy loading.

6
snippets/limited-textarea.md
View File

@ -1,9 +1,9 @@
--- ---
title: Textarea with character limit title: Textarea with character limit
tags: components,state,callback,event type: snippet
tags: [components,state,callback,event]
cover: flower-portrait-2 cover: flower-portrait-2
firstSeen: 2018-10-19T09:11:59+03:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a textarea component with a character limit. Renders a textarea component with a character limit.

6
snippets/limited-word-textarea.md
View File

@ -1,9 +1,9 @@
--- ---
title: Textarea with word limit title: Textarea with word limit
tags: components,input,state,callback,effect,event type: snippet
tags: [components,input,state,callback,effect,event]
cover: painters-desk cover: painters-desk
firstSeen: 2019-02-20T18:22:22+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a textarea component with a word limit. Renders a textarea component with a word limit.

6
snippets/loader.md
View File

@ -1,9 +1,9 @@
--- ---
title: Spinning loader title: Spinning loader
tags: components type: snippet
tags: [components]
cover: godray-computer-mug cover: godray-computer-mug
firstSeen: 2019-09-11T21:59:12+03:00 dateModified: 2020-11-16T15:17:26+02:00
lastUpdated: 2020-11-16T15:17:26+02:00
--- ---
Renders a spinning loader component. Renders a spinning loader component.

6
snippets/mailto.md
View File

@ -1,10 +1,10 @@
--- ---
title: Email link title: Email link
tags: components type: snippet
tags: [components]
author: chalarangelo author: chalarangelo
cover: digital-nomad-4 cover: digital-nomad-4
firstSeen: 2019-01-28T20:10:51+02:00 dateModified: 2020-11-16T15:17:26+02:00
lastUpdated: 2020-11-16T15:17:26+02:00
--- ---
Renders a link formatted to send an email (`mailto:` link). Renders a link formatted to send an email (`mailto:` link).

6
snippets/mapped-table.md
View File

@ -1,9 +1,9 @@
--- ---
title: Object table view title: Object table view
tags: components,array,object type: snippet
tags: [components,array,object]
cover: waves-from-above-2 cover: waves-from-above-2
firstSeen: 2018-11-29T11:50:10+02:00 dateModified: 2020-09-06T14:20:45+03:00
lastUpdated: 2020-09-06T14:20:45+03:00
--- ---
Renders a table with rows dynamically created from an array of objects and a list of property names. Renders a table with rows dynamically created from an array of objects and a list of property names.

6
snippets/modal.md
View File

@ -1,9 +1,9 @@
--- ---
title: Modal dialog title: Modal dialog
tags: components,effect type: snippet
tags: [components,effect]
cover: yellow-white-mug-2 cover: yellow-white-mug-2
firstSeen: 2019-03-11T11:25:06+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a Modal component, controllable through events. Renders a Modal component, controllable through events.

6
snippets/multiselect-checkbox.md
View File

@ -1,9 +1,9 @@
--- ---
title: Stateful checkbox with multiple selection title: Stateful checkbox with multiple selection
tags: components,input,state,array type: snippet
tags: [components,input,state,array]
cover: violin cover: violin
firstSeen: 2019-01-27T09:25:57+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component. Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.

6
snippets/password-revealer.md
View File

@ -1,10 +1,10 @@
--- ---
title: Show/hide password toggle title: Show/hide password toggle
tags: components,input,state type: snippet
tags: [components,input,state]
author: chalarangelo author: chalarangelo
cover: thread cover: thread
firstSeen: 2018-10-18T20:04:22+03:00 dateModified: 2020-11-25T20:46:35+02:00
lastUpdated: 2020-11-25T20:46:35+02:00
--- ---
Renders a password input field with a reveal button. Renders a password input field with a reveal button.

6
snippets/ripple-button.md
View File

@ -1,10 +1,10 @@
--- ---
title: Button with ripple effect title: Button with ripple effect
tags: components,state,effect type: snippet
tags: [components,state,effect]
author: chalarangelo author: chalarangelo
cover: mountain-lake-cottage cover: mountain-lake-cottage
firstSeen: 2019-09-10T09:07:29+03:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a button that animates a ripple effect when clicked. Renders a button that animates a ripple effect when clicked.

6
snippets/select.md
View File

@ -1,9 +1,9 @@
--- ---
title: Uncontrolled select element title: Uncontrolled select element
tags: components,input type: snippet
tags: [components,input]
cover: down-the-stream cover: down-the-stream
firstSeen: 2018-12-10T10:48:03+02:00 dateModified: 2020-11-25T20:46:35+02:00
lastUpdated: 2020-11-25T20:46:35+02:00
--- ---
Renders an uncontrolled `<select>` element that uses a callback function to pass its value to the parent component. Renders an uncontrolled `<select>` element that uses a callback function to pass its value to the parent component.

6
snippets/slider.md
View File

@ -1,9 +1,9 @@
--- ---
title: Uncontrolled range input title: Uncontrolled range input
tags: components,input type: snippet
tags: [components,input]
cover: solitude-beach cover: solitude-beach
firstSeen: 2019-03-02T10:20:55+02:00 dateModified: 2020-11-25T20:46:35+02:00
lastUpdated: 2020-11-25T20:46:35+02:00
--- ---
Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component. Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component.

6
snippets/star-rating.md
View File

@ -1,9 +1,9 @@
--- ---
title: Star rating title: Star rating
tags: components,children,input,state type: snippet
tags: [components,children,input,state]
cover: lake-church cover: lake-church
firstSeen: 2018-10-18T14:33:45+03:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a star rating component. Renders a star rating component.

6
snippets/tabs.md
View File

@ -1,9 +1,9 @@
--- ---
title: Tabs title: Tabs
tags: components,state,children type: snippet
tags: [components,state,children]
cover: by-the-lighthouse cover: by-the-lighthouse
firstSeen: 2019-01-27T11:59:52+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Renders a tabbed menu and view component. Renders a tabbed menu and view component.

6
snippets/tag-input.md
View File

@ -1,9 +1,9 @@
--- ---
title: Tag input field title: Tag input field
tags: components,input,state type: snippet
tags: [components,input,state]
cover: interior-4 cover: interior-4
firstSeen: 2019-10-02T10:06:11+03:00 dateModified: 2020-11-25T21:12:16+02:00
lastUpdated: 2020-11-25T21:12:16+02:00
--- ---
Renders a tag input field. Renders a tag input field.

6
snippets/text-area.md
View File

@ -1,9 +1,9 @@
--- ---
title: Uncontrolled textarea element title: Uncontrolled textarea element
tags: components,input type: snippet
tags: [components,input]
cover: volcano-sunset cover: volcano-sunset
firstSeen: 2018-12-10T10:45:51+02:00 dateModified: 2020-11-25T20:46:35+02:00
lastUpdated: 2020-11-25T20:46:35+02:00
--- ---
Renders an uncontrolled `<textarea>` element that uses a callback function to pass its value to the parent component. Renders an uncontrolled `<textarea>` element that uses a callback function to pass its value to the parent component.

6
snippets/toggle.md
View File

@ -1,9 +1,9 @@
--- ---
title: Toggle title: Toggle
tags: components,state type: snippet
tags: [components,state]
cover: cows cover: cows
firstSeen: 2018-10-27T20:35:37+03:00 dateModified: 2020-11-16T16:50:57+02:00
lastUpdated: 2020-11-16T16:50:57+02:00
--- ---
Renders a toggle component. Renders a toggle component.

6
snippets/tooltip.md
View File

@ -1,9 +1,9 @@
--- ---
title: Tooltip title: Tooltip
tags: components,state,children type: snippet
tags: [components,state,children]
cover: dark-leaves-6 cover: dark-leaves-6
firstSeen: 2018-11-13T20:21:24+02:00 dateModified: 2020-11-16T15:17:26+02:00
lastUpdated: 2020-11-16T15:17:26+02:00
--- ---
Renders a tooltip component. Renders a tooltip component.

6
snippets/tree-view.md
View File

@ -1,10 +1,10 @@
--- ---
title: Expandable object tree view title: Expandable object tree view
tags: components,object,state,recursion type: snippet
tags: [components,object,state,recursion]
author: chalarangelo author: chalarangelo
cover: digital-nomad-9 cover: digital-nomad-9
firstSeen: 2019-02-06T22:17:03+02:00 dateModified: 2020-11-16T16:50:57+02:00
lastUpdated: 2020-11-16T16:50:57+02:00
--- ---
Renders a tree view of a JSON object or array with collapsible content. Renders a tree view of a JSON object or array with collapsible content.

6
snippets/uncontrolled-input.md
View File

@ -1,9 +1,9 @@
--- ---
title: Uncontrolled input field title: Uncontrolled input field
tags: components,input type: snippet
tags: [components,input]
cover: digital-nomad-15 cover: digital-nomad-15
firstSeen: 2019-08-21T12:28:50+03:00 dateModified: 2020-11-03T21:08:39+02:00
lastUpdated: 2020-11-03T21:08:39+02:00
--- ---
Renders an uncontrolled `<input>` element that uses a callback function to inform its parent about value updates. Renders an uncontrolled `<input>` element that uses a callback function to inform its parent about value updates.

6
snippets/use-async.md
View File

@ -1,9 +1,9 @@
--- ---
title: React useAsync hook title: React useAsync hook
tags: hooks,state,reducer type: snippet
tags: [hooks,state,reducer]
cover: oven-paddle cover: oven-paddle
firstSeen: 2020-01-09T20:22:12+02:00 dateModified: 2021-01-07T23:57:13+02:00
lastUpdated: 2021-01-07T23:57:13+02:00
--- ---
Handles asynchronous calls. Handles asynchronous calls.

5
snippets/use-body-scroll-lock.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useBodyScrollLock hook title: React useBodyScrollLock hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: folded-map cover: folded-map
firstSeen: 2021-09-02T05:00:00-04:00 dateModified: 2021-09-02T05:00:00-04:00
--- ---
Enables body scroll locking. Enables body scroll locking.

6
snippets/use-click-inside.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useClickInside hook title: React useClickInside hook
tags: hooks,effect,event type: snippet
tags: [hooks,effect,event]
author: chalarangelo author: chalarangelo
cover: digital-nomad-10 cover: digital-nomad-10
firstSeen: 2019-08-21T13:09:10+03:00 dateModified: 2020-11-16T14:17:53+02:00
lastUpdated: 2020-11-16T14:17:53+02:00
--- ---
Handles the event of clicking inside the wrapped component. Handles the event of clicking inside the wrapped component.

6
snippets/use-click-outside.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useClickOutside hook title: React useClickOutside hook
tags: hooks,effect,event type: snippet
tags: [hooks,effect,event]
author: chalarangelo author: chalarangelo
cover: clutter cover: clutter
firstSeen: 2019-08-21T13:09:10+03:00 dateModified: 2020-11-16T14:17:53+02:00
lastUpdated: 2020-11-16T14:17:53+02:00
--- ---
Handles the event of clicking outside of the wrapped component. Handles the event of clicking outside of the wrapped component.

6
snippets/use-component-did-mount.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useComponentDidMount hook title: React useComponentDidMount hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: highlands cover: highlands
firstSeen: 2020-01-03T15:56:54+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Executes a callback immediately after a component is mounted. Executes a callback immediately after a component is mounted.

5
snippets/use-component-did-update.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useComponentDidUpdate hook title: React useComponentDidUpdate hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: flower-portrait-10 cover: flower-portrait-10
firstSeen: 2021-11-09T05:00:00-04:00 dateModified: 2021-11-09T05:00:00-04:00
--- ---
Executes a callback immediately after a component is updated. Executes a callback immediately after a component is updated.

6
snippets/use-component-will-unmount.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useComponentWillUnmount hook title: React useComponentWillUnmount hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: rocky-beach-3 cover: rocky-beach-3
firstSeen: 2020-01-03T16:00:56+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Executes a callback immediately before a component is unmounted and destroyed. Executes a callback immediately before a component is unmounted and destroyed.

6
snippets/use-copy-to-clipboard.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useCopyToClipboard hook title: React useCopyToClipboard hook
tags: hooks,effect,state,callback type: snippet
tags: [hooks,effect,state,callback]
author: chalarangelo author: chalarangelo
cover: antelope cover: antelope
firstSeen: 2020-04-22T18:51:30+03:00 dateModified: 2020-11-16T14:17:53+02:00
lastUpdated: 2020-11-16T14:17:53+02:00
--- ---
Copies the given text to the clipboard. Copies the given text to the clipboard.

6
snippets/use-debounce.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useDebounce hook title: React useDebounce hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: blue-bird cover: blue-bird
firstSeen: 2021-01-04T16:48:43+02:00 dateModified: 2021-01-04T16:48:43+02:00
lastUpdated: 2021-01-04T16:48:43+02:00
--- ---
Debounces the given value. Debounces the given value.

5
snippets/use-default.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useDefault hook title: React useDefault hook
tags: hooks,state type: snippet
tags: [hooks,state]
author: chalarangelo author: chalarangelo
cover: flower-portrait-8 cover: flower-portrait-8
firstSeen: 2021-10-23T05:00:00-04:00 dateModified: 2021-10-23T05:00:00-04:00
--- ---
Creates a stateful value with a default fallback if it's `null` or `undefined`, and a function to update it. Creates a stateful value with a default fallback if it's `null` or `undefined`, and a function to update it.

5
snippets/use-delayed-state.md
View File

@ -1,8 +1,9 @@
--- ---
title: React useDelayedState hook title: React useDelayedState hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
cover: city-view cover: city-view
firstSeen: 2021-12-15T05:00:00-04:00 dateModified: 2021-12-15T05:00:00-04:00
--- ---
Delays creating a stateful value until some condition is met. Delays creating a stateful value until some condition is met.

5
snippets/use-effect-once.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useEffectOnce hook title: React useEffectOnce hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: pop-of-green cover: pop-of-green
firstSeen: 2021-11-16T05:00:00-04:00 dateModified: 2021-11-16T05:00:00-04:00
--- ---
Runs a callback at most once when a condition becomes true. Runs a callback at most once when a condition becomes true.

5
snippets/use-error.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useError hook title: React useError hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: baloons-field cover: baloons-field
firstSeen: 2021-09-30T05:00:00-04:00 dateModified: 2021-09-30T05:00:00-04:00
--- ---
Creates an error dispatcher. Creates an error dispatcher.

5
snippets/use-event-listener.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useEventListener hook title: React useEventListener hook
tags: hooks,effect,event type: snippet
tags: [hooks,effect,event]
author: chalarangelo author: chalarangelo
cover: beach-riders cover: beach-riders
firstSeen: 2021-09-01T05:00:00-04:00 dateModified: 2021-09-01T05:00:00-04:00
--- ---
Adds an event listener for the specified event type on the given element. Adds an event listener for the specified event type on the given element.

6
snippets/use-fetch.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useFetch hook title: React useFetch hook
tags: hooks,effect,state type: snippet
tags: [hooks,effect,state]
author: chalarangelo author: chalarangelo
cover: coworking-space cover: coworking-space
firstSeen: 2019-08-21T14:23:57+03:00 dateModified: 2022-05-01T12:50:38+02:00
lastUpdated: 2022-05-01T12:50:38+02:00
--- ---
Implements `fetch()` in a declarative manner. Implements `fetch()` in a declarative manner.

5
snippets/use-form.md
View File

@ -1,8 +1,9 @@
--- ---
title: React useForm hook title: React useForm hook
tags: hooks,state type: snippet
tags: [hooks,state]
cover: cave-view cover: cave-view
firstSeen: 2021-09-17T05:00:00-04:00 dateModified: 2021-09-17T05:00:00-04:00
--- ---
Creates a stateful value from the fields in a form. Creates a stateful value from the fields in a form.

5
snippets/use-get-set.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useGetSet hook title: React useGetSet hook
tags: hooks,state type: snippet
tags: [hooks,state]
author: chalarangelo author: chalarangelo
cover: interior-12 cover: interior-12
firstSeen: 2021-10-27T05:00:00-04:00 dateModified: 2021-10-27T05:00:00-04:00
--- ---
Creates a stateful value, returning a getter and a setter function. Creates a stateful value, returning a getter and a setter function.

5
snippets/use-hash.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useHash hook title: React useHash hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: book-chair cover: book-chair
firstSeen: 2021-10-02T05:00:00-04:00 dateModified: 2021-10-02T05:00:00-04:00
--- ---
Tracks the browser's location hash value, and allows changing it. Tracks the browser's location hash value, and allows changing it.

5
snippets/use-hover.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useHover hook title: React useHover hook
tags: hooks,state,callback type: snippet
tags: [hooks,state,callback]
author: chalarangelo author: chalarangelo
cover: pink-flower-tree cover: pink-flower-tree
firstSeen: 2021-10-05T05:00:00-04:00 dateModified: 2021-10-05T05:00:00-04:00
--- ---
Handles the event of hovering over the wrapped component. Handles the event of hovering over the wrapped component.

5
snippets/use-intersection-observer.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useIntersectionObserver hook title: React useIntersectionObserver hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: budapest-palace cover: budapest-palace
firstSeen: 2021-09-10T05:00:00-04:00 dateModified: 2021-09-10T05:00:00-04:00
--- ---
Observes visibility changes for a given element. Observes visibility changes for a given element.

6
snippets/use-interval.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useInterval hook title: React useInterval hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: digital-nomad-13 cover: digital-nomad-13
firstSeen: 2019-08-21T13:18:52+03:00 dateModified: 2020-11-16T14:17:53+02:00
lastUpdated: 2020-11-16T14:17:53+02:00
--- ---
Implements `setInterval()` in a declarative manner. Implements `setInterval()` in a declarative manner.

6
snippets/use-isomporphic-effect.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useIsomporphicEffect hook title: React useIsomporphicEffect hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: jars-on-shelf-2 cover: jars-on-shelf-2
firstSeen: 2021-09-29T05:00:00-04:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Resolves to `useEffect()` on the server and `useLayoutEffect()` on the client. Resolves to `useEffect()` on the server and `useLayoutEffect()` on the client.

5
snippets/use-key-press.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useKeyPress hook title: React useKeyPress hook
tags: hooks,state,effect,event type: snippet
tags: [hooks,state,effect,event]
author: chalarangelo author: chalarangelo
cover: yellow-white-mug-1 cover: yellow-white-mug-1
firstSeen: 2021-09-07T05:00:00-04:00 dateModified: 2021-09-07T05:00:00-04:00
--- ---
Listens for changes in the pressed state of a given key. Listens for changes in the pressed state of a given key.

5
snippets/use-local-storage.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useLocalStorage hook title: React useLocalStorage hook
tags: hooks,state type: snippet
tags: [hooks,state]
author: chalarangelo author: chalarangelo
cover: houses-rock-sea cover: houses-rock-sea
firstSeen: 2021-09-13T05:00:00-04:00 dateModified: 2021-09-13T05:00:00-04:00
--- ---
Creates a stateful value that is persisted to `localStorage`, and a function to update it. Creates a stateful value that is persisted to `localStorage`, and a function to update it.

5
snippets/use-map.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useMap hook title: React useMap hook
tags: hooks,state type: snippet
tags: [hooks,state]
author: chalarangelo author: chalarangelo
cover: work-hard-computer cover: work-hard-computer
firstSeen: 2021-11-06T05:00:00-04:00 dateModified: 2021-11-06T05:00:00-04:00
--- ---
Creates a stateful `Map` object, and a set of functions to manipulate it. Creates a stateful `Map` object, and a set of functions to manipulate it.

6
snippets/use-media-query.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useMediaQuery hook title: React useMediaQuery hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: clay-pot-horizon cover: clay-pot-horizon
firstSeen: 2020-01-03T14:39:46+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Checks if the current environment matches a given media query and returns the appropriate value. Checks if the current environment matches a given media query and returns the appropriate value.

5
snippets/use-merge-state.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useMergeState hook title: React useMergeState hook
tags: hooks,state type: snippet
tags: [hooks,state]
author: chalarangelo author: chalarangelo
cover: digital-nomad-6 cover: digital-nomad-6
firstSeen: 2021-09-23T05:00:00-04:00 dateModified: 2021-09-23T05:00:00-04:00
--- ---
Creates a stateful value, and a function to update it by merging the new state provided. Creates a stateful value, and a function to update it by merging the new state provided.

5
snippets/use-mutation-observer.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useMutationObserver hook title: React useMutationObserver hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: laptop-plants cover: laptop-plants
firstSeen: 2021-11-23T05:00:00-04:00 dateModified: 2021-11-23T05:00:00-04:00
--- ---
Watches for changes made to the DOM tree, using a `MutationObserver` Watches for changes made to the DOM tree, using a `MutationObserver`

6
snippets/use-navigator-on-line.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useNavigatorOnLine hook title: React useNavigatorOnLine hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: digital-nomad-7 cover: digital-nomad-7
firstSeen: 2019-09-11T09:17:26+03:00 dateModified: 2020-11-16T14:17:53+02:00
lastUpdated: 2020-11-16T14:17:53+02:00
--- ---
Checks if the client is online or offline. Checks if the client is online or offline.

5
snippets/use-on-global-event.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useOnGlobalEvent hook title: React useOnGlobalEvent hook
tags: hooks,effect,event type: snippet
tags: [hooks,effect,event]
author: chalarangelo author: chalarangelo
cover: tropical-bike cover: tropical-bike
firstSeen: 2021-12-22T05:00:00-04:00 dateModified: 2021-12-22T05:00:00-04:00
--- ---
Executes a callback whenever an event occurs on the global object. Executes a callback whenever an event occurs on the global object.

5
snippets/use-on-window-resize.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useOnWindowResize hook title: React useOnWindowResize hook
tags: hooks,effect,event type: snippet
tags: [hooks,effect,event]
author: chalarangelo author: chalarangelo
cover: flower-camera cover: flower-camera
firstSeen: 2021-12-01T05:00:00-04:00 dateModified: 2021-12-01T05:00:00-04:00
--- ---
Executes a callback whenever the window is resized. Executes a callback whenever the window is resized.

5
snippets/use-on-window-scroll.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useOnWindowScroll hook title: React useOnWindowScroll hook
tags: hooks,effect,event type: snippet
tags: [hooks,effect,event]
author: chalarangelo author: chalarangelo
cover: planning cover: planning
firstSeen: 2021-12-08T05:00:00-04:00 dateModified: 2021-12-08T05:00:00-04:00
--- ---
Executes a callback whenever the window is scrolled. Executes a callback whenever the window is scrolled.

6
snippets/use-persisted-state.md
View File

@ -1,10 +1,10 @@
--- ---
title: React usePersistedState hook title: React usePersistedState hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: red-berries cover: red-berries
firstSeen: 2020-11-29T14:16:36+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Returns a stateful value, persisted in `localStorage`, and a function to update it. Returns a stateful value, persisted in `localStorage`, and a function to update it.

5
snippets/use-portal.md
View File

@ -1,9 +1,10 @@
--- ---
title: React usePortal hook title: React usePortal hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: interior-3 cover: interior-3
firstSeen: 2022-01-05T05:00:00-04:00 dateModified: 2022-01-05T05:00:00-04:00
--- ---
Creates a portal, allowing rendering of children outside the parent component. Creates a portal, allowing rendering of children outside the parent component.

6
snippets/use-previous.md
View File

@ -1,10 +1,10 @@
--- ---
title: React usePrevious hook title: React usePrevious hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: couch-laptop cover: couch-laptop
firstSeen: 2020-01-03T09:50:22+02:00 dateModified: 2020-11-16T14:17:53+02:00
lastUpdated: 2020-11-16T14:17:53+02:00
--- ---
Stores the previous state or props. Stores the previous state or props.

5
snippets/use-request-animation-frame.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useRequestAnimationFrame hook title: React useRequestAnimationFrame hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: aerial-view-port cover: aerial-view-port
firstSeen: 2021-12-29T05:00:00-04:00 dateModified: 2021-12-29T05:00:00-04:00
--- ---
Runs an animating function, calling it before every repaint. Runs an animating function, calling it before every repaint.

5
snippets/use-script.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useScript hook title: React useScript hook
tags: hooks,effect,state,event type: snippet
tags: [hooks,effect,state,event]
author: chalarangelo author: chalarangelo
cover: travel-mug-3 cover: travel-mug-3
firstSeen: 2021-10-08T05:00:00-04:00 dateModified: 2021-10-08T05:00:00-04:00
--- ---
Dynamically loads an external script. Dynamically loads an external script.

5
snippets/use-search-param.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useSearchParam hook title: React useSearchParam hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: coffee-phone-tray-3 cover: coffee-phone-tray-3
firstSeen: 2021-10-13T05:00:00-04:00 dateModified: 2021-10-13T05:00:00-04:00
--- ---
Tracks the browser's location search param. Tracks the browser's location search param.

5
snippets/use-session-storage.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useSessionStorage hook title: React useSessionStorage hook
tags: hooks,state type: snippet
tags: [hooks,state]
author: chalarangelo author: chalarangelo
cover: white-laptop cover: white-laptop
firstSeen: 2021-09-15T05:00:00-04:00 dateModified: 2021-09-15T05:00:00-04:00
--- ---
Creates a stateful value that is persisted to `sessionStorage`, and a function to update it. Creates a stateful value that is persisted to `sessionStorage`, and a function to update it.

5
snippets/use-set.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useSet hook title: React useSet hook
tags: hooks,state type: snippet
tags: [hooks,state]
author: chalarangelo author: chalarangelo
cover: engine cover: engine
firstSeen: 2021-11-01T05:00:00-04:00 dateModified: 2021-11-01T05:00:00-04:00
--- ---
Creates a stateful `Set` object, and a set of functions to manipulate it. Creates a stateful `Set` object, and a set of functions to manipulate it.

6
snippets/use-ssr.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useSSR hook title: React useSSR hook
tags: hooks,effect,state,memo type: snippet
tags: [hooks,effect,state,memo]
author: chalarangelo author: chalarangelo
cover: interior-6 cover: interior-6
firstSeen: 2019-08-24T13:18:16+03:00 dateModified: 2021-03-10T06:38:42+02:00
lastUpdated: 2021-03-10T06:38:42+02:00
--- ---
Checks if the code is running on the browser or the server. Checks if the code is running on the browser or the server.

6
snippets/use-timeout.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useTimeout hook title: React useTimeout hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: interior-10 cover: interior-10
firstSeen: 2019-08-21T13:20:57+03:00 dateModified: 2020-11-16T14:17:53+02:00
lastUpdated: 2020-11-16T14:17:53+02:00
--- ---
Implements `setTimeout()` in a declarative manner. Implements `setTimeout()` in a declarative manner.

5
snippets/use-title.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useTitle hook title: React useTitle hook
tags: hooks,effect type: snippet
tags: [hooks,effect]
author: chalarangelo author: chalarangelo
cover: blue-lake cover: blue-lake
firstSeen: 2021-09-27T05:00:00-04:00 dateModified: 2021-09-27T05:00:00-04:00
--- ---
Sets the title of the page Sets the title of the page

6
snippets/use-toggler.md
View File

@ -1,10 +1,10 @@
--- ---
title: React useToggler hook title: React useToggler hook
tags: hooks,state,callback type: snippet
tags: [hooks,state,callback]
author: chalarangelo author: chalarangelo
cover: tram-car-2 cover: tram-car-2
firstSeen: 2020-11-27T09:41:31+02:00 dateModified: 2020-11-27T09:41:31+02:00
lastUpdated: 2020-11-27T09:41:31+02:00
--- ---
Provides a boolean state variable that can be toggled between its two states. Provides a boolean state variable that can be toggled between its two states.

6
snippets/use-unload.md
View File

@ -1,9 +1,9 @@
--- ---
title: React useUnload hook title: React useUnload hook
tags: hooks,effect,event type: snippet
tags: [hooks,effect,event]
cover: digital-nomad-14 cover: digital-nomad-14
firstSeen: 2020-10-05T17:53:24+03:00 dateModified: 2020-11-29T14:16:36+02:00
lastUpdated: 2020-11-29T14:16:36+02:00
--- ---
Handles the `beforeunload` window event. Handles the `beforeunload` window event.

5
snippets/use-update.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useUpdate hook title: React useUpdate hook
tags: components,reducer type: snippet
tags: [components,reducer]
author: chalarangelo author: chalarangelo
cover: lavender-shelf cover: lavender-shelf
firstSeen: 2021-09-24T05:00:00-04:00 dateModified: 2021-09-24T05:00:00-04:00
--- ---
Forces the component to re-render when called. Forces the component to re-render when called.

5
snippets/use-window-size.md
View File

@ -1,9 +1,10 @@
--- ---
title: React useWindowSize hook title: React useWindowSize hook
tags: hooks,state,effect type: snippet
tags: [hooks,state,effect]
author: chalarangelo author: chalarangelo
cover: polar-bear cover: polar-bear
firstSeen: 2021-10-18T05:00:00-04:00 dateModified: 2021-10-18T05:00:00-04:00
--- ---
Tracks the dimensions of the browser window. Tracks the dimensions of the browser window.