Merge pull request #133 from 30-seconds/updated-frontmatter
Updated frontmatter
This commit is contained in:
Angelos Chalaris
GitHub
@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Component Name
|
||||
tags: components,state,effect
|
||||
type: snippet
|
||||
tags: [components,state,effect]
|
||||
cover: image
|
||||
firstSeen: 2021-06-13T05:00:00-04:00
|
||||
dateModified: 2021-06-13T05:00:00-04:00
|
||||
---
|
||||
|
||||
Explain briefly what the snippet does.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Collapsible accordion
|
||||
tags: components,children,state
|
||||
type: snippet
|
||||
tags: [components,children,state]
|
||||
cover: beach-pineapple
|
||||
firstSeen: 2019-03-02T10:46:34+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders an accordion menu with multiple collapsible content elements.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Closable alert
|
||||
tags: components,state,effect
|
||||
type: snippet
|
||||
tags: [components,state,effect]
|
||||
cover: flower-portrait-1
|
||||
firstSeen: 2019-09-17T13:19:30+03:00
|
||||
lastUpdated: 2021-01-07T23:57:13+02:00
|
||||
dateModified: 2021-01-07T23:57:13+02:00
|
||||
---
|
||||
|
||||
Renders an alert component with `type` prop.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Automatic text linking
|
||||
tags: components,fragment,regexp
|
||||
type: snippet
|
||||
tags: [components,fragment,regexp]
|
||||
author: chalarangelo
|
||||
cover: red-petals
|
||||
firstSeen: 2018-12-05T15:04:49+02:00
|
||||
lastUpdated: 2020-11-03T20:42:15+02:00
|
||||
dateModified: 2020-11-03T20:42:15+02:00
|
||||
---
|
||||
|
||||
Renders a string as plaintext, with URLs converted to appropriate link elements.
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
title: Callable telephone link
|
||||
tags: components
|
||||
type: snippet
|
||||
tags: [components]
|
||||
author: chalarangelo
|
||||
unlisted: true
|
||||
cover: rabbit-call
|
||||
firstSeen: 2020-10-04T00:07:37+03:00
|
||||
lastUpdated: 2021-01-04T12:32:47+02:00
|
||||
dateModified: 2021-01-04T12:32:47+02:00
|
||||
---
|
||||
|
||||
Renders a link formatted to call a phone number (`tel:` link).
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Carousel
|
||||
tags: components,children,state,effect
|
||||
type: snippet
|
||||
tags: [components,children,state,effect]
|
||||
cover: shell-focus
|
||||
firstSeen: 2018-11-13T21:24:55+02:00
|
||||
lastUpdated: 2020-11-03T20:42:15+02:00
|
||||
dateModified: 2020-11-03T20:42:15+02:00
|
||||
---
|
||||
|
||||
Renders a carousel component.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Collapsible content
|
||||
tags: components,children,state
|
||||
type: snippet
|
||||
tags: [components,children,state]
|
||||
cover: washed-ashore
|
||||
firstSeen: 2018-10-17T20:42:23+03:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders a component with collapsible content.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Controlled input field
|
||||
tags: components,input
|
||||
type: snippet
|
||||
tags: [components,input]
|
||||
cover: digital-nomad-5
|
||||
firstSeen: 2019-08-21T13:09:10+03:00
|
||||
lastUpdated: 2020-11-03T21:08:39+02:00
|
||||
dateModified: 2020-11-03T21:08:39+02:00
|
||||
---
|
||||
|
||||
Renders a controlled `<input>` element that uses a callback function to inform its parent about value updates.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Countdown timer
|
||||
tags: components,state
|
||||
type: snippet
|
||||
tags: [components,state]
|
||||
cover: sea-view-2
|
||||
firstSeen: 2019-02-06T14:39:31+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders a countdown timer that prints a message when it reaches zero.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Data list
|
||||
tags: components
|
||||
type: snippet
|
||||
tags: [components]
|
||||
cover: interior-14
|
||||
firstSeen: 2018-11-29T12:12:24+02:00
|
||||
lastUpdated: 2020-11-03T21:26:34+02:00
|
||||
dateModified: 2020-11-03T21:26:34+02:00
|
||||
---
|
||||
|
||||
Renders a list of elements from an array of primitives.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Data table
|
||||
tags: components
|
||||
type: snippet
|
||||
tags: [components]
|
||||
cover: armchair
|
||||
firstSeen: 2018-11-29T11:13:59+02:00
|
||||
lastUpdated: 2020-11-03T21:26:34+02:00
|
||||
dateModified: 2020-11-03T21:26:34+02:00
|
||||
---
|
||||
|
||||
Renders a table with rows dynamically created from an array of primitives.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: File drag and drop area
|
||||
tags: components,input,state,effect,event
|
||||
type: snippet
|
||||
tags: [components,input,state,effect,event]
|
||||
author: chalarangelo
|
||||
cover: man-red-sunset
|
||||
firstSeen: 2019-02-02T12:17:27+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders a file drag and drop component for a single file.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Lazy-loading image
|
||||
tags: components,effect,state
|
||||
type: snippet
|
||||
tags: [components,effect,state]
|
||||
cover: strawberries
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Textarea with character limit
|
||||
tags: components,state,callback,event
|
||||
type: snippet
|
||||
tags: [components,state,callback,event]
|
||||
cover: flower-portrait-2
|
||||
firstSeen: 2018-10-19T09:11:59+03:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders a textarea component with a character limit.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Textarea with word limit
|
||||
tags: components,input,state,callback,effect,event
|
||||
type: snippet
|
||||
tags: [components,input,state,callback,effect,event]
|
||||
cover: painters-desk
|
||||
firstSeen: 2019-02-20T18:22:22+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders a textarea component with a word limit.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Spinning loader
|
||||
tags: components
|
||||
type: snippet
|
||||
tags: [components]
|
||||
cover: godray-computer-mug
|
||||
firstSeen: 2019-09-11T21:59:12+03:00
|
||||
lastUpdated: 2020-11-16T15:17:26+02:00
|
||||
dateModified: 2020-11-16T15:17:26+02:00
|
||||
---
|
||||
|
||||
Renders a spinning loader component.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Email link
|
||||
tags: components
|
||||
type: snippet
|
||||
tags: [components]
|
||||
author: chalarangelo
|
||||
cover: digital-nomad-4
|
||||
firstSeen: 2019-01-28T20:10:51+02:00
|
||||
lastUpdated: 2020-11-16T15:17:26+02:00
|
||||
dateModified: 2020-11-16T15:17:26+02:00
|
||||
---
|
||||
|
||||
Renders a link formatted to send an email (`mailto:` link).
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Object table view
|
||||
tags: components,array,object
|
||||
type: snippet
|
||||
tags: [components,array,object]
|
||||
cover: waves-from-above-2
|
||||
firstSeen: 2018-11-29T11:50:10+02:00
|
||||
lastUpdated: 2020-09-06T14:20:45+03:00
|
||||
dateModified: 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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Modal dialog
|
||||
tags: components,effect
|
||||
type: snippet
|
||||
tags: [components,effect]
|
||||
cover: yellow-white-mug-2
|
||||
firstSeen: 2019-03-11T11:25:06+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders a Modal component, controllable through events.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Stateful checkbox with multiple selection
|
||||
tags: components,input,state,array
|
||||
type: snippet
|
||||
tags: [components,input,state,array]
|
||||
cover: violin
|
||||
firstSeen: 2019-01-27T09:25:57+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 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.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Show/hide password toggle
|
||||
tags: components,input,state
|
||||
type: snippet
|
||||
tags: [components,input,state]
|
||||
author: chalarangelo
|
||||
cover: thread
|
||||
firstSeen: 2018-10-18T20:04:22+03:00
|
||||
lastUpdated: 2020-11-25T20:46:35+02:00
|
||||
dateModified: 2020-11-25T20:46:35+02:00
|
||||
---
|
||||
|
||||
Renders a password input field with a reveal button.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Button with ripple effect
|
||||
tags: components,state,effect
|
||||
type: snippet
|
||||
tags: [components,state,effect]
|
||||
author: chalarangelo
|
||||
cover: mountain-lake-cottage
|
||||
firstSeen: 2019-09-10T09:07:29+03:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders a button that animates a ripple effect when clicked.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Uncontrolled select element
|
||||
tags: components,input
|
||||
type: snippet
|
||||
tags: [components,input]
|
||||
cover: down-the-stream
|
||||
firstSeen: 2018-12-10T10:48:03+02:00
|
||||
lastUpdated: 2020-11-25T20:46:35+02:00
|
||||
dateModified: 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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Uncontrolled range input
|
||||
tags: components,input
|
||||
type: snippet
|
||||
tags: [components,input]
|
||||
cover: solitude-beach
|
||||
firstSeen: 2019-03-02T10:20:55+02:00
|
||||
lastUpdated: 2020-11-25T20:46:35+02:00
|
||||
dateModified: 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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Star rating
|
||||
tags: components,children,input,state
|
||||
type: snippet
|
||||
tags: [components,children,input,state]
|
||||
cover: lake-church
|
||||
firstSeen: 2018-10-18T14:33:45+03:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders a star rating component.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Tabs
|
||||
tags: components,state,children
|
||||
type: snippet
|
||||
tags: [components,state,children]
|
||||
cover: by-the-lighthouse
|
||||
firstSeen: 2019-01-27T11:59:52+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Renders a tabbed menu and view component.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Tag input field
|
||||
tags: components,input,state
|
||||
type: snippet
|
||||
tags: [components,input,state]
|
||||
cover: interior-4
|
||||
firstSeen: 2019-10-02T10:06:11+03:00
|
||||
lastUpdated: 2020-11-25T21:12:16+02:00
|
||||
dateModified: 2020-11-25T21:12:16+02:00
|
||||
---
|
||||
|
||||
Renders a tag input field.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Uncontrolled textarea element
|
||||
tags: components,input
|
||||
type: snippet
|
||||
tags: [components,input]
|
||||
cover: volcano-sunset
|
||||
firstSeen: 2018-12-10T10:45:51+02:00
|
||||
lastUpdated: 2020-11-25T20:46:35+02:00
|
||||
dateModified: 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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Toggle
|
||||
tags: components,state
|
||||
type: snippet
|
||||
tags: [components,state]
|
||||
cover: cows
|
||||
firstSeen: 2018-10-27T20:35:37+03:00
|
||||
lastUpdated: 2020-11-16T16:50:57+02:00
|
||||
dateModified: 2020-11-16T16:50:57+02:00
|
||||
---
|
||||
|
||||
Renders a toggle component.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Tooltip
|
||||
tags: components,state,children
|
||||
type: snippet
|
||||
tags: [components,state,children]
|
||||
cover: dark-leaves-6
|
||||
firstSeen: 2018-11-13T20:21:24+02:00
|
||||
lastUpdated: 2020-11-16T15:17:26+02:00
|
||||
dateModified: 2020-11-16T15:17:26+02:00
|
||||
---
|
||||
|
||||
Renders a tooltip component.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Expandable object tree view
|
||||
tags: components,object,state,recursion
|
||||
type: snippet
|
||||
tags: [components,object,state,recursion]
|
||||
author: chalarangelo
|
||||
cover: digital-nomad-9
|
||||
firstSeen: 2019-02-06T22:17:03+02:00
|
||||
lastUpdated: 2020-11-16T16:50:57+02:00
|
||||
dateModified: 2020-11-16T16:50:57+02:00
|
||||
---
|
||||
|
||||
Renders a tree view of a JSON object or array with collapsible content.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Uncontrolled input field
|
||||
tags: components,input
|
||||
type: snippet
|
||||
tags: [components,input]
|
||||
cover: digital-nomad-15
|
||||
firstSeen: 2019-08-21T12:28:50+03:00
|
||||
lastUpdated: 2020-11-03T21:08:39+02:00
|
||||
dateModified: 2020-11-03T21:08:39+02:00
|
||||
---
|
||||
|
||||
Renders an uncontrolled `<input>` element that uses a callback function to inform its parent about value updates.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: React useAsync hook
|
||||
tags: hooks,state,reducer
|
||||
type: snippet
|
||||
tags: [hooks,state,reducer]
|
||||
cover: oven-paddle
|
||||
firstSeen: 2020-01-09T20:22:12+02:00
|
||||
lastUpdated: 2021-01-07T23:57:13+02:00
|
||||
dateModified: 2021-01-07T23:57:13+02:00
|
||||
---
|
||||
|
||||
Handles asynchronous calls.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useBodyScrollLock hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
cover: folded-map
|
||||
firstSeen: 2021-09-02T05:00:00-04:00
|
||||
dateModified: 2021-09-02T05:00:00-04:00
|
||||
---
|
||||
|
||||
Enables body scroll locking.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useClickInside hook
|
||||
tags: hooks,effect,event
|
||||
type: snippet
|
||||
tags: [hooks,effect,event]
|
||||
author: chalarangelo
|
||||
cover: digital-nomad-10
|
||||
firstSeen: 2019-08-21T13:09:10+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
dateModified: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Handles the event of clicking inside the wrapped component.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useClickOutside hook
|
||||
tags: hooks,effect,event
|
||||
type: snippet
|
||||
tags: [hooks,effect,event]
|
||||
author: chalarangelo
|
||||
cover: clutter
|
||||
firstSeen: 2019-08-21T13:09:10+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
dateModified: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Handles the event of clicking outside of the wrapped component.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useComponentDidMount hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
cover: highlands
|
||||
firstSeen: 2020-01-03T15:56:54+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Executes a callback immediately after a component is mounted.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useComponentDidUpdate hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useComponentWillUnmount hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
cover: rocky-beach-3
|
||||
firstSeen: 2020-01-03T16:00:56+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Executes a callback immediately before a component is unmounted and destroyed.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useCopyToClipboard hook
|
||||
tags: hooks,effect,state,callback
|
||||
type: snippet
|
||||
tags: [hooks,effect,state,callback]
|
||||
author: chalarangelo
|
||||
cover: antelope
|
||||
firstSeen: 2020-04-22T18:51:30+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
dateModified: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Copies the given text to the clipboard.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useDebounce hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
cover: blue-bird
|
||||
firstSeen: 2021-01-04T16:48:43+02:00
|
||||
lastUpdated: 2021-01-04T16:48:43+02:00
|
||||
dateModified: 2021-01-04T16:48:43+02:00
|
||||
---
|
||||
|
||||
Debounces the given value.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useDefault hook
|
||||
tags: hooks,state
|
||||
type: snippet
|
||||
tags: [hooks,state]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
title: React useDelayedState hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useEffectOnce hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useError hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
cover: baloons-field
|
||||
firstSeen: 2021-09-30T05:00:00-04:00
|
||||
dateModified: 2021-09-30T05:00:00-04:00
|
||||
---
|
||||
|
||||
Creates an error dispatcher.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useEventListener hook
|
||||
tags: hooks,effect,event
|
||||
type: snippet
|
||||
tags: [hooks,effect,event]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useFetch hook
|
||||
tags: hooks,effect,state
|
||||
type: snippet
|
||||
tags: [hooks,effect,state]
|
||||
author: chalarangelo
|
||||
cover: coworking-space
|
||||
firstSeen: 2019-08-21T14:23:57+03:00
|
||||
lastUpdated: 2022-05-01T12:50:38+02:00
|
||||
dateModified: 2022-05-01T12:50:38+02:00
|
||||
---
|
||||
|
||||
Implements `fetch()` in a declarative manner.
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
title: React useForm hook
|
||||
tags: hooks,state
|
||||
type: snippet
|
||||
tags: [hooks,state]
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useGetSet hook
|
||||
tags: hooks,state
|
||||
type: snippet
|
||||
tags: [hooks,state]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useHash hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useHover hook
|
||||
tags: hooks,state,callback
|
||||
type: snippet
|
||||
tags: [hooks,state,callback]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useIntersectionObserver hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useInterval hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
cover: digital-nomad-13
|
||||
firstSeen: 2019-08-21T13:18:52+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
dateModified: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Implements `setInterval()` in a declarative manner.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useIsomporphicEffect hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
cover: jars-on-shelf-2
|
||||
firstSeen: 2021-09-29T05:00:00-04:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Resolves to `useEffect()` on the server and `useLayoutEffect()` on the client.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useKeyPress hook
|
||||
tags: hooks,state,effect,event
|
||||
type: snippet
|
||||
tags: [hooks,state,effect,event]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useLocalStorage hook
|
||||
tags: hooks,state
|
||||
type: snippet
|
||||
tags: [hooks,state]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useMap hook
|
||||
tags: hooks,state
|
||||
type: snippet
|
||||
tags: [hooks,state]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useMediaQuery hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
cover: clay-pot-horizon
|
||||
firstSeen: 2020-01-03T14:39:46+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Checks if the current environment matches a given media query and returns the appropriate value.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useMergeState hook
|
||||
tags: hooks,state
|
||||
type: snippet
|
||||
tags: [hooks,state]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useMutationObserver hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
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`
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useNavigatorOnLine hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
cover: digital-nomad-7
|
||||
firstSeen: 2019-09-11T09:17:26+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
dateModified: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Checks if the client is online or offline.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useOnGlobalEvent hook
|
||||
tags: hooks,effect,event
|
||||
type: snippet
|
||||
tags: [hooks,effect,event]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useOnWindowResize hook
|
||||
tags: hooks,effect,event
|
||||
type: snippet
|
||||
tags: [hooks,effect,event]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useOnWindowScroll hook
|
||||
tags: hooks,effect,event
|
||||
type: snippet
|
||||
tags: [hooks,effect,event]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React usePersistedState hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
cover: red-berries
|
||||
firstSeen: 2020-11-29T14:16:36+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Returns a stateful value, persisted in `localStorage`, and a function to update it.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React usePortal hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React usePrevious hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
cover: couch-laptop
|
||||
firstSeen: 2020-01-03T09:50:22+02:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
dateModified: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Stores the previous state or props.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useRequestAnimationFrame hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useScript hook
|
||||
tags: hooks,effect,state,event
|
||||
type: snippet
|
||||
tags: [hooks,effect,state,event]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useSearchParam hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useSessionStorage hook
|
||||
tags: hooks,state
|
||||
type: snippet
|
||||
tags: [hooks,state]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useSet hook
|
||||
tags: hooks,state
|
||||
type: snippet
|
||||
tags: [hooks,state]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useSSR hook
|
||||
tags: hooks,effect,state,memo
|
||||
type: snippet
|
||||
tags: [hooks,effect,state,memo]
|
||||
author: chalarangelo
|
||||
cover: interior-6
|
||||
firstSeen: 2019-08-24T13:18:16+03:00
|
||||
lastUpdated: 2021-03-10T06:38:42+02:00
|
||||
dateModified: 2021-03-10T06:38:42+02:00
|
||||
---
|
||||
|
||||
Checks if the code is running on the browser or the server.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useTimeout hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
cover: interior-10
|
||||
firstSeen: 2019-08-21T13:20:57+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
dateModified: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Implements `setTimeout()` in a declarative manner.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useTitle hook
|
||||
tags: hooks,effect
|
||||
type: snippet
|
||||
tags: [hooks,effect]
|
||||
author: chalarangelo
|
||||
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
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: React useToggler hook
|
||||
tags: hooks,state,callback
|
||||
type: snippet
|
||||
tags: [hooks,state,callback]
|
||||
author: chalarangelo
|
||||
cover: tram-car-2
|
||||
firstSeen: 2020-11-27T09:41:31+02:00
|
||||
lastUpdated: 2020-11-27T09:41:31+02:00
|
||||
dateModified: 2020-11-27T09:41:31+02:00
|
||||
---
|
||||
|
||||
Provides a boolean state variable that can be toggled between its two states.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: React useUnload hook
|
||||
tags: hooks,effect,event
|
||||
type: snippet
|
||||
tags: [hooks,effect,event]
|
||||
cover: digital-nomad-14
|
||||
firstSeen: 2020-10-05T17:53:24+03:00
|
||||
lastUpdated: 2020-11-29T14:16:36+02:00
|
||||
dateModified: 2020-11-29T14:16:36+02:00
|
||||
---
|
||||
|
||||
Handles the `beforeunload` window event.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useUpdate hook
|
||||
tags: components,reducer
|
||||
type: snippet
|
||||
tags: [components,reducer]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: React useWindowSize hook
|
||||
tags: hooks,state,effect
|
||||
type: snippet
|
||||
tags: [hooks,state,effect]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user