andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update wording

Browse Source
This commit is contained in:
Chalarangelo
2021-10-13 20:40:54 +03:00
parent a1d4f62042
commit b4dd74f868
18 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/Modal.md
View File

@ -2,12 +2,12 @@
title: Modal
tags: components,effect,intermediate
firstSeen: 2019-03-11T11:25:06+02:00
lastUpdated: 2020-11-25T21:12:16+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
---
Renders a Modal component, controllable through events.
- Define `keydownHandler`, a method which handles all keyboard events and is used to call `onClose` when the `Esc` key is pressed.
- 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.
- 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.