Update formatting

This commit is contained in:
Isabelle Viktoria Maciohsek
2022-01-30 19:41:09 +02:00
parent 790f0de37f
commit e7988c0065
6 changed files with 7 additions and 7 deletions

View File

@ -7,7 +7,7 @@ firstSeen: 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.
- Use the `useState()` hook with a function to initialize its value lazily. - Use the `useState()` hook with a function to initialize its value lazily.
- Use a `try...catch` block and `Storage.getItem()` to try and get the value from `localStorage`. If no value is found, use `Storage.setItem()` to store the `defaultValue` and use it as the initial state. If an error occurs, use `defaultValue` as the initial state. - Use a `try...catch` block and `Storage.getItem()` to try and get the value from `Window.localStorage`. If no value is found, use `Storage.setItem()` to store the `defaultValue` and use it as the initial state. If an error occurs, use `defaultValue` as the initial state.
- Define a function that will update the state variable with the passed value and use `Storage.setItem()` to store it. - Define a function that will update the state variable with the passed value and use `Storage.setItem()` to store it.
```jsx ```jsx

View File

@ -7,8 +7,8 @@ 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.
- Check if `window` and `window.matchMedia` exist. Return `whenFalse` if not (e.g. SSR environment or unsupported browser). - Check if `Window` and `Window.matchMedia()` exist. Return `whenFalse` if not (e.g. SSR environment or unsupported browser).
- Use `window.matchMedia()` to match the given `query`. Cast its `matches` property to a boolean and store in a state variable, `match`, using the `useState()` hook. - Use `Window.matchMedia()` to match the given `query`. Cast its `matches` property to a boolean and store in a state variable, `match`, using the `useState()` hook.
- Use the `useEffect()` hook to add a listener for changes and to clean up the listeners after the hook is destroyed. - Use the `useEffect()` hook to add a listener for changes and to clean up the listeners after the hook is destroyed.
- Return either `whenTrue` or `whenFalse` based on the value of `match`. - Return either `whenTrue` or `whenFalse` based on the value of `match`.

View File

@ -7,7 +7,7 @@ lastUpdated: 2020-11-16T14:17:53+02:00
Checks if the client is online or offline. Checks if the client is online or offline.
- Create a function, `getOnLineStatus`, that uses the `NavigatorOnLine` web API to get the online status of the client. - Create a function, `getOnLineStatus`, that uses the `Navigator.onLine` web API to get the online status of the client.
- Use the `useState()` hook to create an appropriate state variable, `status`, and setter. - Use the `useState()` hook to create an appropriate state variable, `status`, and setter.
- Use the `useEffect()` hook to add listeners for appropriate events, updating state, and cleanup those listeners when unmounting. - Use the `useEffect()` hook to add listeners for appropriate events, updating state, and cleanup those listeners when unmounting.
- Finally return the `status` state variable. - Finally return the `status` state variable.

View File

@ -8,7 +8,7 @@ Executes a callback whenever an event occurs on the global object.
- Use the `useRef()` hook to create a variable, `listener`, which will hold the listener reference. - Use the `useRef()` hook to create a variable, `listener`, which will hold the listener reference.
- Use the `useRef()` hook to create a variable that will hold the previous values of the `type` and `options` arguments. - Use the `useRef()` hook to create a variable that will hold the previous values of the `type` and `options` arguments.
- Use the `useEffect()` hook and `EventTarget.addEventListener()` to listen to the given event `type` on the `window` global object. - Use the `useEffect()` hook and `EventTarget.addEventListener()` to listen to the given event `type` on the `Window` global object.
- Use `EventTarget.removeEventListener()` to remove any existing listeners and clean up when the component unmounts. - Use `EventTarget.removeEventListener()` to remove any existing listeners and clean up when the component unmounts.
```jsx ```jsx

View File

@ -7,7 +7,7 @@ firstSeen: 2021-12-01T05:00:00-04:00
Executes a callback whenever the window is resized. Executes a callback whenever the window is resized.
- Use the `useRef()` hook to create a variable, `listener`, which will hold the listener reference. - Use the `useRef()` hook to create a variable, `listener`, which will hold the listener reference.
- Use the `useEffect()` hook and `EventTarget.addEventListener()` to listen to the `'resize'` event of the `window` global object. - Use the `useEffect()` hook and `EventTarget.addEventListener()` to listen to the `'resize'` event of the `Window` global object.
- Use `EventTarget.removeEventListener()` to remove any existing listeners and clean up when the component unmounts. - Use `EventTarget.removeEventListener()` to remove any existing listeners and clean up when the component unmounts.
```jsx ```jsx

View File

@ -7,7 +7,7 @@ firstSeen: 2021-12-08T05:00:00-04:00
Executes a callback whenever the window is scrolled. Executes a callback whenever the window is scrolled.
- Use the `useRef()` hook to create a variable, `listener`, which will hold the listener reference. - Use the `useRef()` hook to create a variable, `listener`, which will hold the listener reference.
- Use the `useEffect()` hook and `EventTarget.addEventListener()` to listen to the `'scroll'` event of the `window` global object. - Use the `useEffect()` hook and `EventTarget.addEventListener()` to listen to the `'scroll'` event of the `Window` global object.
- Use `EventTarget.removeEventListener()` to remove any existing listeners and clean up when the component unmounts. - Use `EventTarget.removeEventListener()` to remove any existing listeners and clean up when the component unmounts.
```jsx ```jsx