Update formatting

This commit is contained in:
Isabelle Viktoria Maciohsek
2022-01-30 19:40:27 +02:00
parent 9b9e547a93
commit d69d13ee26
3 changed files with 3 additions and 3 deletions

View File

@ -8,7 +8,7 @@ lastUpdated: 2021-10-13T19:29:39+02:00
Renders a Modal component, controllable through events.
- Define a `keydownHandler` that handles all keyboard events and calls `onClose` when the `Esc` key is pressed.
- Use the `useEffect()` hook to add or remove the `keydown` event listener to the `document`, calling `keydownHandler` for every event.
- Use the `useEffect()` hook to add or remove the `keydown` event listener to the `Document`, calling `keydownHandler` for every event.
- Add a styled `<span>` element that acts as a close button, calling `onClose` when clicked.
- Use the `isVisible` prop passed down from the parent to determine if the modal should be displayed or not.
- To use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute.

View File

@ -10,7 +10,7 @@ Renders a button that animates a ripple effect when clicked.
- Use the `useState()` hook to create the `coords` and `isRippling` state variables. These are used for the pointer's coordinates and the animation state of the button respectively.
- Use a `useEffect()` hook to change the value of `isRippling` every time the `coords` state variable changes, starting the animation.
- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.
- Use a `useEffect()` hook to reset `coords` whenever the `isRippling` state variable is `false.`
- Use a `useEffect()` hook to reset `coords` whenever the `isRippling` state variable is `false`.
- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.
```css

View File

@ -7,7 +7,7 @@ lastUpdated: 2020-11-16T16:50:57+02:00
Renders a toggle component.
- Use the `useState()` hook to initialize the `isToggleOn` state variable to `defaultToggled`.
- Use the `useState()` hook to initialize the `isToggledOn` state variable to `defaultToggled`.
- Render an `<input>` and bind its `onClick` event to update the `isToggledOn` state variable, applying the appropriate `className` to the wrapping `<label>`.
```css