Update snippet descriptions

2020-11-25 21:12:16 +02:00
parent f90d8359f3
commit d47eb52604
2 changed files with 47 additions and 31 deletions
--- 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 <kbd>Esc</kbd> 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 `<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.

 ```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 : (
    <div className="modal" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()}>
@ -129,9 +134,8 @@ const Modal = ({ isVisible = false, title, content, footer, onClose }) => {
 ```jsx
 const App = () => {
  const [isModal, setModal] = React.useState(false);
-
  return (
-    <React.Fragment>
+    <>
      <button onClick={() => setModal(true)}>Click Here</button>
      <Modal
        isVisible={isModal}
@ -140,7 +144,7 @@ const App = () => {
        footer={<button>Cancel</button>}
        onClose={() => setModal(false)}
      />
-    </React.Fragment>
+    </>
  );
 };

--- 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 (
    <div className="tag-input">
-      <ul id="tags">
+      <ul className="tags">
        {tagData.map((tag, index) => (
          <li key={index} className="tag">
            <span className="tag-title">{tag}</span>
-            <span className="tag-close-icon" onClick={() => removeTagData(index)}>
+            <span
+              className="tag-close-icon"
+              onClick={() => removeTagData(index)}
+            >
              x
            </span>
          </li>
@ -96,7 +105,7 @@ const TagInput = ({ tags }) => {
      <input
        type="text"
        onKeyUp={event => (event.key === 'Enter' ? addTagData(event) : null)}
-        placeholder="Press enter to add tags"
+        placeholder="Press enter to add a tag"
      />
    </div>
  );
@ -104,5 +113,8 @@ const TagInput = ({ tags }) => {
 ```

 ```jsx
-ReactDOM.render(<TagInput tags={['Nodejs', 'MongoDB']}/>, document.getElementById('root'));
+ReactDOM.render(
+  <TagInput tags={['Nodejs', 'MongoDB']} />,
+  document.getElementById('root')
+);
 ```