Update formatting
This commit is contained in:
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Reference in New Issue
Block a user