diff --git a/snippets/Modal.md b/snippets/Modal.md
index 6d73a87f8..93633592c 100644
--- a/snippets/Modal.md
+++ b/snippets/Modal.md
@@ -4,13 +4,12 @@ tags: components,effect,intermediate
---
Renders a Modal component, controllable through events.
-To use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute.
-- Use object destructuring to set defaults for certain attributes of the modal component.
-- Define `keydownHandler`, a method which handles all keyboard events, which can be used according to your needs to dispatch actions (e.g. close the modal when Esc is pressed).
-- Use `React.useEffect()` hook to add or remove the `keydown` event listener, which calls `keydownHandler`.
-- Use the `isVisible` prop to determine if the modal should be shown or not.
-- Use CSS to style and position the modal component.
+- Define `keydownHandler`, a method which handles all keyboard events and is used to call `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 `` 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.
```css
.modal {
@@ -53,22 +52,27 @@ To use the component, import `Modal` only once and then display it by passing a
align-items: center;
padding: 1rem;
}
+
.modal-header {
border-bottom: 1px solid #dbdbdb;
justify-content: space-between;
}
+
.modal-footer {
border-top: 1px solid #dbdbdb;
justify-content: flex-end;
}
+
.modal-close {
cursor: pointer;
padding: 1rem;
margin: -1rem -1rem -1rem auto;
}
+
.modal-body {
overflow: auto;
}
+
.modal-content {
padding: 1rem;
}
@@ -81,6 +85,7 @@ To use the component, import `Modal` only once and then display it by passing a
opacity: 1;
}
}
+
@keyframes slide-in {
from {
transform: translateY(-150px);
@@ -93,20 +98,20 @@ To use the component, import `Modal` only once and then display it by passing a
```jsx
const Modal = ({ isVisible = false, title, content, footer, onClose }) => {
+ const keydownHandler = ({ key }) => {
+ switch (key) {
+ case 'Escape':
+ onClose();
+ break;
+ default:
+ }
+ };
+
React.useEffect(() => {
document.addEventListener('keydown', keydownHandler);
return () => document.removeEventListener('keydown', keydownHandler);
});
- const keydownHandler = ({ key }) => {
- switch (key) {
- case 'Escape':
- onClose();
- break;
- default:
- }
- };
-
return !isVisible ? null : (
e.stopPropagation()}>
@@ -129,9 +134,8 @@ const Modal = ({ isVisible = false, title, content, footer, onClose }) => {
```jsx
const App = () => {
const [isModal, setModal] = React.useState(false);
-
return (
-
+ <>
{
footer={}
onClose={() => setModal(false)}
/>
-
+
);
};
diff --git a/snippets/TagInput.md b/snippets/TagInput.md
index 8fd984bd2..9f84f80eb 100644
--- a/snippets/TagInput.md
+++ b/snippets/TagInput.md
@@ -5,12 +5,12 @@ tags: components,input,state,intermediate
Renders a tag input field.
-- Define a `TagInput` component and use `React.useState()` hook to initialize an array from `tags`.
-- Use `Array.prototype.map()` on collected nodes to render the list of tags.
-- Define the `addTagData` method, which will be executed on pressing the `Enter` key.
-- The `addTagData` method uses the `setTagData` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tagData` array.
+- Define a `TagInput` component and use the `useState()` hook to initialize an array from `tags`.
+- Use `Array.prototype.map()` on the collected nodes to render the list of tags.
+- Define the `addTagData` method, which will be executed when pressing the `Enter` key.
+- The `addTagData` method calls `setTagData` to add the new tag using the spread (`...`) operator to prepend the existing tags and add the new tag at the end of the `tagData` array.
- Define the `removeTagData` method, which will be executed on clicking the delete icon in the tag.
-- Use `Array.prototype.filter()` in `removeTagData` method to remove the tag using the `index` of the tag to filter it out from `tagData` array.
+- Use `Array.prototype.filter()` in the `removeTagData` method to remove the tag using its `index` to filter it out from the `tagData` array.
```css
.tag-input {
@@ -21,22 +21,26 @@ Renders a tag input field.
border: 1px solid #d6d8da;
border-radius: 6px;
}
+
.tag-input input {
flex: 1;
border: none;
height: 46px;
font-size: 14px;
padding: 4px 0 0;
- &:focus {
- outline: transparent;
- }
}
-#tags {
+
+.tag-input input:focus {
+ outline: transparent;
+}
+
+.tags {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 8px 0 0;
}
+
.tag {
width: auto;
height: 32px;
@@ -51,9 +55,11 @@ Renders a tag input field.
margin: 0 8px 8px 0;
background: #0052cc;
}
+
.tag-title {
margin-top: 3px;
}
+
.tag-close-icon {
display: block;
width: 16px;
@@ -83,11 +89,14 @@ const TagInput = ({ tags }) => {
};
return (
-
+
{tagData.map((tag, index) => (
{tag}
- removeTagData(index)}>
+ removeTagData(index)}
+ >
x
@@ -96,7 +105,7 @@ const TagInput = ({ tags }) => {
(event.key === 'Enter' ? addTagData(event) : null)}
- placeholder="Press enter to add tags"
+ placeholder="Press enter to add a tag"
/>