diff --git a/snippets/Modal.md b/snippets/Modal.md index ce9f600d9..1b376b24f 100644 --- a/snippets/Modal.md +++ b/snippets/Modal.md @@ -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 `` 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. diff --git a/snippets/RippleButton.md b/snippets/RippleButton.md index fc138455a..0a76cc593 100644 --- a/snippets/RippleButton.md +++ b/snippets/RippleButton.md @@ -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 diff --git a/snippets/Toggle.md b/snippets/Toggle.md index dacbd2fb4..2b95caf6c 100644 --- a/snippets/Toggle.md +++ b/snippets/Toggle.md @@ -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 `` and bind its `onClick` event to update the `isToggledOn` state variable, applying the appropriate `className` to the wrapping `