Merge pull request #120 from 30-seconds/redate
This commit is contained in:
Angelos Chalaris
GitHub
14
.github/config.yml
vendored
14
.github/config.yml
vendored
@ -1,14 +0,0 @@
|
||||
# Configuration for request-info - https://github.com/behaviorbot/request-info
|
||||
|
||||
# *Required* Comment to reply with
|
||||
requestInfoReplyComment: >
|
||||
We would appreciate it if you could provide us with some more information about this issue/PR!
|
||||
|
||||
# *OPTIONAL* default titles to check against for lack of descriptiveness
|
||||
# MUST BE ALL LOWERCASE
|
||||
requestInfoDefaultTitles:
|
||||
- update readme.md
|
||||
- updates
|
||||
|
||||
# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
|
||||
requestInfoLabelToAdd: needs-more-info
|
||||
35
.github/lock.yml
vendored
35
.github/lock.yml
vendored
@ -1,35 +0,0 @@
|
||||
# Configuration for Lock Threads - https://github.com/dessant/lock-threads
|
||||
|
||||
# Number of days of inactivity before a closed issue or pull request is locked
|
||||
daysUntilLock: 60
|
||||
|
||||
# Skip issues and pull requests created before a given timestamp. Timestamp must
|
||||
# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable
|
||||
skipCreatedBefore: false
|
||||
|
||||
# Issues and pull requests with these labels will be ignored. Set to `[]` to disable
|
||||
exemptLabels: []
|
||||
|
||||
# Label to add before locking, such as `outdated`. Set to `false` to disable
|
||||
lockLabel: false
|
||||
|
||||
# Comment to post before locking. Set to `false` to disable
|
||||
lockComment: false
|
||||
|
||||
# Assign `resolved` as the reason for locking. Set to `false` to disable
|
||||
setLockReason: true
|
||||
|
||||
# Limit to only `issues` or `pulls`
|
||||
# only: issues
|
||||
|
||||
# Optionally, specify configuration settings just for `issues` or `pulls`
|
||||
# issues:
|
||||
# exemptLabels:
|
||||
# - help-wanted
|
||||
# lockLabel: outdated
|
||||
|
||||
# pulls:
|
||||
# daysUntilLock: 30
|
||||
|
||||
# Repository to extend settings from
|
||||
# _extends: repo
|
||||
18
.github/stale.yml
vendored
18
.github/stale.yml
vendored
@ -1,18 +0,0 @@
|
||||
# Number of days of inactivity before an issue becomes stale
|
||||
daysUntilStale: 21
|
||||
# Number of days of inactivity before a stale issue is closed
|
||||
daysUntilClose: 7
|
||||
# Issues with these labels will never be considered stale
|
||||
exemptLabels:
|
||||
- not-stale
|
||||
- pinned
|
||||
- security
|
||||
# Label to use when marking an issue as stale
|
||||
staleLabel: false
|
||||
# Comment to post when marking an issue as stale. Set to `false` to disable
|
||||
markComment: >
|
||||
This issue has been automatically marked as stale because it has not had
|
||||
recent activity. It will be closed if no further activity occurs. Thank you
|
||||
for your contributions.
|
||||
# Comment to post when closing a stale issue. Set to `false` to disable
|
||||
closeComment: false
|
||||
@ -2,16 +2,6 @@
|
||||
|
||||
**30 seconds of code** is powered by the community, so feel free to contribute in any way you can to help us!
|
||||
|
||||
## Tools
|
||||
|
||||
Before you begin contributing, you should install the integration-tools globally on your machine:
|
||||
|
||||
```sh
|
||||
npm install -g @30-seconds/integration-tools
|
||||
```
|
||||
|
||||
This will allow you to use our customized tools for all of our content repositories.
|
||||
|
||||
## How you can help
|
||||
|
||||
- Submit pull requests with new snippets (see guidelines below) or snippet updates (tags, descriptions, explanations, typos, examples, code improvements).
|
||||
@ -23,25 +13,24 @@ Breaking any of these rules will result in your pull request being closed. Pleas
|
||||
|
||||
- **Always be polite and respectful to others** and try to follow the advice of the moderators/collaborators/owners.
|
||||
- **Only modify snippet files**, never modify the generated files in the `snippet_data` directory.
|
||||
- **Use the integration tools commands** to generate new snippets, ensuring they have the correct name and are in the correct location.
|
||||
- **Use the snippet template** to create new snippets, ensure they have the correct name and are in the correct location.
|
||||
- **Follow snippet format exactly**, otherwise your snippets will not be recognized correctly by the tools responsible for publishing them on the website. This includes such things as spacing and empty lines - if you accidentally make a mistake, consult the repository's [snippet template](snippet-template.md).
|
||||
- **Snippets should solve real-world problems**, no matter how simple and should be abstract enough to be applied to different scenarios.
|
||||
|
||||
## Snippet creation
|
||||
|
||||
After installing the integration tools, you can run the following command:
|
||||
In order to create a new snippet, you should follow the steps below:
|
||||
|
||||
```sh
|
||||
create-new-snippet <my-snippet-name>
|
||||
```
|
||||
|
||||
Replace `<my-snippet-name>` with the name of the snippet you are adding.
|
||||
- Crate a copy of the [snippet template](snippet-template.md) in the `snippets` directory.
|
||||
- Change the name of the newly created file to the name of your snippet.
|
||||
- Edit the file, adding your snippet based on the guidelines.
|
||||
|
||||
## Snippet guidelines
|
||||
|
||||
- Snippets must have all their frontmatter sections (title, tags etc.) filled.
|
||||
- Snippet titles must correspond to the filename and follow the language and repository's naming conventions.
|
||||
- Snippet tags must be comma-separated, contain a primary tag as seen on the website as their first tag and an expertise tag (`beginner`, `intermediate` or `advanced`) as their last tag.
|
||||
- Snippets must have their `firstSeen` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601).
|
||||
- Snippet descriptions must be short and to the point. Explain *what* the snippet does and detail *how* the snippet works and the language features used in it.
|
||||
- Snippet code and examples must be enclosed in appropriate, language-tagged blocks as shown in the snippet template, be short and use modern techniques and features. Also make sure to test your code before submitting.
|
||||
- If your snippet contains arguments with default parameters, explain what happens if they are omitted when calling the function and what the default case is. Specify default parameters for arguments only if necessary.
|
||||
|
||||
14
README.md
14
README.md
@ -1,14 +1,14 @@
|
||||
[](https://30secondsofcode.org/react/p/1)
|
||||
|
||||
# 30 seconds of React
|
||||
# 30 seconds of code
|
||||
|
||||
> Short React code snippets for all your development needs
|
||||
|
||||
* Visit [our website](https://30secondsofcode.org) to view our snippet collection.
|
||||
* Use the [Search page](https://30secondsofcode.org/search) to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
|
||||
* Browse the [React Snippet List](https://30secondsofcode.org/react/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
|
||||
* Browse the [React Snippet collection](https://30secondsofcode.org/react/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
|
||||
* Click on each snippet card to view the whole snippet, including code, explanation and examples.
|
||||
* You can use the button on the right side of a snippet card to copy the code to clipboard.
|
||||
* You can use the button at the bottom of a snippet card to view the snippet in Codepen.
|
||||
* If you like the project, give it a star. It means a lot to the people maintaining it.
|
||||
|
||||
## Want to contribute?
|
||||
@ -18,9 +18,9 @@
|
||||
* If you find a problem with a specific snippet, please [open an issue](https://github.com/30-seconds/30-seconds-of-react/issues/new).
|
||||
* If you find a problem with the website, please [report it in the web repository](https://github.com/30-seconds/30-seconds-web/issues/new).
|
||||
|
||||
## Credits & Sponsors
|
||||
## Credits
|
||||
|
||||
* This repository is maintained by the [30-seconds organization on GitHub](https://github.com/30-seconds).
|
||||
* This repository is maintained by the [30 seconds of code organization on GitHub](https://github.com/30-seconds).
|
||||
* All snippets are licensed under the CC0-1.0 License, unless explicitly stated otherwise.
|
||||
* Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the 30 seconds GitHub organization.
|
||||
* Our website is powered by [Netlify](https://www.netlify.com/), [Gatsby](https://www.gatsbyjs.org/), [Travis CI](https://travis-ci.com/) & [GitHub](https://github.com/).
|
||||
* Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization.
|
||||
* Our website is powered by [Netlify](https://www.netlify.com/), [Next.js](https://nextjs.org/) & [GitHub](https://github.com/).
|
||||
|
||||
BIN
logo.png
BIN
logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 169 KiB |
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: ComponentName
|
||||
tags: components,state,effect,intermediate
|
||||
firstSeen: 2021-06-13T05:00:00-04:00
|
||||
---
|
||||
|
||||
Explain briefly what the snippet does.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Accordion
|
||||
tags: components,children,state,advanced
|
||||
firstSeen: 2019-03-02T10:46:34+02:00
|
||||
lastUpdated: 2021-01-07T23:57:13+02:00
|
||||
---
|
||||
|
||||
Renders an accordion menu with multiple collapsible content elements.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Alert
|
||||
tags: components,state,effect,beginner
|
||||
firstSeen: 2019-09-17T13:19:30+03:00
|
||||
lastUpdated: 2021-01-07T23:57:13+02:00
|
||||
---
|
||||
|
||||
Renders an alert component with `type` prop.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: AutoLink
|
||||
tags: components,fragment,regexp,intermediate
|
||||
firstSeen: 2018-12-05T15:04:49+02:00
|
||||
lastUpdated: 2020-11-03T20:42:15+02:00
|
||||
---
|
||||
|
||||
Renders a string as plaintext, with URLs converted to appropriate link elements.
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
title: Callto
|
||||
tags: components,beginner
|
||||
unlisted: true
|
||||
firstSeen: 2020-10-04T00:07:37+03:00
|
||||
lastUpdated: 2021-01-04T12:32:47+02:00
|
||||
---
|
||||
|
||||
Renders a link formatted to call a phone number (`tel:` link).
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Carousel
|
||||
tags: components,children,state,effect,advanced
|
||||
firstSeen: 2018-11-13T21:24:55+02:00
|
||||
lastUpdated: 2020-11-03T20:42:15+02:00
|
||||
---
|
||||
|
||||
Renders a carousel component.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Collapse
|
||||
tags: components,children,state,beginner
|
||||
firstSeen: 2018-10-17T20:42:23+03:00
|
||||
lastUpdated: 2020-11-03T20:42:15+02:00
|
||||
---
|
||||
|
||||
Renders a component with collapsible content.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: ControlledInput
|
||||
tags: components,input,intermediate
|
||||
firstSeen: 2019-08-21T13:09:10+03: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.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: CountDown
|
||||
tags: components,state,advanced
|
||||
firstSeen: 2019-02-06T14:39:31+02:00
|
||||
lastUpdated: 2020-11-26T23:57:34+02:00
|
||||
---
|
||||
|
||||
Renders a countdown timer that prints a message when it reaches zero.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: DataList
|
||||
tags: components,beginner
|
||||
firstSeen: 2018-11-29T12:12:24+02:00
|
||||
lastUpdated: 2020-11-03T21:26:34+02:00
|
||||
---
|
||||
|
||||
Renders a list of elements from an array of primitives.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: DataTable
|
||||
tags: components,beginner
|
||||
firstSeen: 2018-11-29T11:13:59+02:00
|
||||
lastUpdated: 2020-11-03T21:26:34+02:00
|
||||
---
|
||||
|
||||
Renders a table with rows dynamically created from an array of primitives.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: FileDrop
|
||||
tags: components,input,state,effect,event,advanced
|
||||
firstSeen: 2019-02-02T12:17:27+02:00
|
||||
lastUpdated: 2020-11-26T09:43:21+02:00
|
||||
---
|
||||
|
||||
Renders a file drag and drop component for a single file.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: LimitedTextarea
|
||||
tags: components,state,callback,event,beginner
|
||||
firstSeen: 2018-10-19T09:11:59+03:00
|
||||
lastUpdated: 2020-11-16T16:50:57+02:00
|
||||
---
|
||||
|
||||
Renders a textarea component with a character limit.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: LimitedWordTextarea
|
||||
tags: components,input,state,callback,effect,event,intermediate
|
||||
firstSeen: 2019-02-20T18:22:22+02:00
|
||||
lastUpdated: 2021-01-07T23:57:13+02:00
|
||||
---
|
||||
|
||||
Renders a textarea component with a word limit.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Loader
|
||||
tags: components,beginner
|
||||
firstSeen: 2019-09-11T21:59:12+03:00
|
||||
lastUpdated: 2020-11-16T15:17:26+02:00
|
||||
---
|
||||
|
||||
Renders a spinning loader component.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Mailto
|
||||
tags: components,beginner
|
||||
firstSeen: 2019-01-28T20:10:51+02:00
|
||||
lastUpdated: 2020-11-16T15:17:26+02:00
|
||||
---
|
||||
|
||||
Renders a link formatted to send an email (`mailto:` link).
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: MappedTable
|
||||
tags: components,array,object,intermediate
|
||||
firstSeen: 2018-11-29T11:50:10+02: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.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Modal
|
||||
tags: components,effect,intermediate
|
||||
firstSeen: 2019-03-11T11:25:06+02:00
|
||||
lastUpdated: 2020-11-25T21:12:16+02:00
|
||||
---
|
||||
|
||||
Renders a Modal component, controllable through events.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: MultiselectCheckbox
|
||||
tags: components,input,state,array,intermediate
|
||||
firstSeen: 2019-01-27T09:25:57+02:00
|
||||
lastUpdated: 2020-11-26T23:57:34+02:00
|
||||
---
|
||||
|
||||
Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: PasswordRevealer
|
||||
tags: components,input,state,beginner
|
||||
firstSeen: 2018-10-18T20:04:22+03:00
|
||||
lastUpdated: 2020-11-25T20:46:35+02:00
|
||||
---
|
||||
|
||||
Renders a password input field with a reveal button.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: RippleButton
|
||||
tags: components,state,effect,intermediate
|
||||
firstSeen: 2019-09-10T09:07:29+03:00
|
||||
lastUpdated: 2020-11-26T09:43:21+02:00
|
||||
---
|
||||
|
||||
Renders a button that animates a ripple effect when clicked.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Select
|
||||
tags: components,input,beginner
|
||||
firstSeen: 2018-12-10T10:48:03+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.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Slider
|
||||
tags: components,input,beginner
|
||||
firstSeen: 2019-03-02T10:20:55+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.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: StarRating
|
||||
tags: components,children,input,state,intermediate
|
||||
firstSeen: 2018-10-18T14:33:45+03:00
|
||||
lastUpdated: 2020-11-26T23:57:34+02:00
|
||||
---
|
||||
|
||||
Renders a star rating component.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Tabs
|
||||
tags: components,state,children,intermediate
|
||||
firstSeen: 2019-01-27T11:59:52+02:00
|
||||
lastUpdated: 2020-11-25T20:46:35+02:00
|
||||
---
|
||||
|
||||
Renders a tabbed menu and view component.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: TagInput
|
||||
tags: components,input,state,intermediate
|
||||
firstSeen: 2019-10-02T10:06:11+03:00
|
||||
lastUpdated: 2020-11-25T21:12:16+02:00
|
||||
---
|
||||
|
||||
Renders a tag input field.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: TextArea
|
||||
tags: components,input,beginner
|
||||
firstSeen: 2018-12-10T10:45:51+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.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Toggle
|
||||
tags: components,state,beginner
|
||||
firstSeen: 2018-10-27T20:35:37+03:00
|
||||
lastUpdated: 2020-11-16T16:50:57+02:00
|
||||
---
|
||||
|
||||
Renders a toggle component.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Tooltip
|
||||
tags: components,state,children,beginner
|
||||
firstSeen: 2018-11-13T20:21:24+02:00
|
||||
lastUpdated: 2020-11-16T15:17:26+02:00
|
||||
---
|
||||
|
||||
Renders a tooltip component.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: TreeView
|
||||
tags: components,object,state,recursion,advanced
|
||||
firstSeen: 2019-02-06T22:17:03+02:00
|
||||
lastUpdated: 2020-11-16T16:50:57+02:00
|
||||
---
|
||||
|
||||
Renders a tree view of a JSON object or array with collapsible content.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: UncontrolledInput
|
||||
tags: components,input,intermediate
|
||||
firstSeen: 2019-08-21T12:28:50+03: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.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useAsync
|
||||
tags: hooks,state,reducer,advanced
|
||||
firstSeen: 2020-01-09T20:22:12+02:00
|
||||
lastUpdated: 2021-01-07T23:57:13+02:00
|
||||
---
|
||||
|
||||
Handles asynchronous calls.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useClickInside
|
||||
tags: hooks,effect,event,intermediate
|
||||
firstSeen: 2019-08-21T13:09:10+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Handles the event of clicking inside the wrapped component.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useClickOutside
|
||||
tags: hooks,effect,event,intermediate
|
||||
firstSeen: 2019-08-21T13:09:10+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Handles the event of clicking outside of the wrapped component.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useComponentDidMount
|
||||
tags: hooks,effect,beginner
|
||||
firstSeen: 2020-01-03T15:56:54+02:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Executes a callback immediately after a component is mounted.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useComponentWillUnmount
|
||||
tags: hooks,effect,beginner
|
||||
firstSeen: 2020-01-03T16:00:56+02:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Executes a callback immediately before a component is unmounted and destroyed.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useCopyToClipboard
|
||||
tags: hooks,effect,state,callback,advanced
|
||||
firstSeen: 2020-04-22T18:51:30+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Copies the given text to the clipboard.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useDebounce
|
||||
tags: hooks,state,effect,intermediate
|
||||
firstSeen: 2021-01-04T16:48:43+02:00
|
||||
lastUpdated: 2021-01-04T16:48:43+02:00
|
||||
---
|
||||
|
||||
Debounces the given value.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useFetch
|
||||
tags: hooks,effect,state,intermediate
|
||||
firstSeen: 2019-08-21T14:23:57+03:00
|
||||
lastUpdated: 2021-01-07T23:57:13+02:00
|
||||
---
|
||||
|
||||
Implements `fetch` in a declarative manner.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useInterval
|
||||
tags: hooks,effect,intermediate
|
||||
firstSeen: 2019-08-21T13:18:52+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Implements `setInterval` in a declarative manner.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useMediaQuery
|
||||
tags: hooks,state,effect,intermediate
|
||||
firstSeen: 2020-01-03T14:39:46+02:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Checks if the current environment matches a given media query and returns the appropriate value.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useNavigatorOnLine
|
||||
tags: hooks,state,effect,intermediate
|
||||
firstSeen: 2019-09-11T09:17:26+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Checks if the client is online or offline.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: usePersistedState
|
||||
tags: hooks,state,effect,advanced
|
||||
firstSeen: 2020-11-29T14:16:36+02:00
|
||||
lastUpdated: 2020-11-29T14:16:36+02:00
|
||||
---
|
||||
|
||||
Returns a stateful value, persisted in `localStorage`, and a function to update it.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: usePrevious
|
||||
tags: hooks,state,effect,beginner
|
||||
firstSeen: 2020-01-03T09:50:22+02:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Stores the previous state or props.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useSSR
|
||||
tags: hooks,effect,state,memo,intermediate
|
||||
firstSeen: 2019-08-24T13:18:16+03:00
|
||||
lastUpdated: 2021-03-10T06:38:42+02:00
|
||||
---
|
||||
|
||||
Checks if the code is running on the browser or the server.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useTimeout
|
||||
tags: hooks,effect,intermediate
|
||||
firstSeen: 2019-08-21T13:20:57+03:00
|
||||
lastUpdated: 2020-11-16T14:17:53+02:00
|
||||
---
|
||||
|
||||
Implements `setTimeout` in a declarative manner.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useToggler
|
||||
tags: hooks,state,callback,beginner
|
||||
firstSeen: 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.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: useUnload
|
||||
tags: hooks,effect,event,intermediate
|
||||
firstSeen: 2020-10-05T17:53:24+03:00
|
||||
lastUpdated: 2020-11-29T14:16:36+02:00
|
||||
---
|
||||
|
||||
Handles the `beforeunload` window event.
|
||||
|
||||
Reference in New Issue
Block a user