Update and housekeeping

snippets/Modal.md

@@ -1,16 +1,16 @@
 ---
-title:  Modal
+title: Modal
 tags: visual,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.
+- 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.
 
 ```css
 .modal {
@@ -18,9 +18,9 @@ To use the component, import `Modal` only once and then display it by passing a
   top: 0;
   bottom: 0;
   left: 0;
-  right:0;
+  right: 0;
   width: 100%;
-  z-index: 9999;  
+  z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -29,7 +29,7 @@ To use the component, import `Modal` only once and then display it by passing a
   animation-duration: 300ms;
 }
 
-.modal-dialog{
+.modal-dialog {
   width: 100%;
   max-width: 550px;
   background: white;
@@ -39,51 +39,60 @@ To use the component, import `Modal` only once and then display it by passing a
   text-align: left;
   display: flex;
   flex-direction: column;
-  overflow:hidden;
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  overflow: hidden;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   -webkit-animation-name: animatetop;
   -webkit-animation-duration: 0.4s;
   animation-name: slide-in;
   animation-duration: 0.5s;
 }
 
-.modal-header,.modal-footer{
+.modal-header,
+.modal-footer {
   display: flex;
   align-items: center;
   padding: 1rem;
 }
-.modal-header{
+.modal-header {
   border-bottom: 1px solid #dbdbdb;
   justify-content: space-between;
 }
-.modal-footer{
+.modal-footer {
   border-top: 1px solid #dbdbdb;
   justify-content: flex-end;
 }
-.modal-close{
+.modal-close {
   cursor: pointer;
   padding: 1rem;
   margin: -1rem -1rem -1rem auto;
 }
-.modal-body{
+.modal-body {
   overflow: auto;
 }
-.modal-content{
+.modal-content {
   padding: 1rem;
 }
 
 @keyframes appear {
-  from {opacity: 0;}
-  to {opacity: 1;}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 @keyframes slide-in {
-  from {transform: translateY(-150px);}
-  to { transform: translateY(0);}
+  from {
+    transform: translateY(-150px);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 ```
 
 ```jsx
-function Modal({ isVisible = false, title, content, footer, onClose }){  
+function Modal({ isVisible = false, title, content, footer, onClose }) {
   React.useEffect(() => {
     document.addEventListener('keydown', keydownHandler);
     return () => document.removeEventListener('keydown', keydownHandler);
@@ -91,46 +100,50 @@ function Modal({ isVisible = false, title, content, footer, onClose }){
 
   function keydownHandler({ key }) {
     switch (key) {
-      case 'Escape':  onClose(); break;
+      case 'Escape':
+        onClose();
+        break;
       default:
     }
   }
 
   return !isVisible ? null : (
     <div className="modal" onClick={onClose}>
-        <div className="modal-dialog"  onClick={e => e.stopPropagation()}>
+      <div className="modal-dialog" onClick={e => e.stopPropagation()}>
         <div className="modal-header">
           <h3 className="modal-title">{title}</h3>
-          <span className="modal-close" onClick={onClose}>&times;</span>
+          <span className="modal-close" onClick={onClose}>
+            &times;
+          </span>
         </div>
         <div className="modal-body">
-          <div className="modal-content">{ content }</div>
+          <div className="modal-content">{content}</div>
         </div>
         {footer && <div className="modal-footer">{footer}</div>}
       </div>
     </div>
-  )
+  );
 }
 ```
 
 ```jsx
 //Add the component to the render function
 function App() {
-  const [ isModal, setModal] = React.useState(false);
-  
+  const [isModal, setModal] = React.useState(false);
+
   return (
     <React.Fragment>
-      <button onClick={()=> setModal(true)}>Click Here</button>
-      <Modal 
-        isVisible={ isModal }
-        title= "Modal Title"
-        content = {<p>Add your content here</p>}
-        footer = {<button>Cancel</button>}
-        onClose ={()=> setModal(false)}
+      <button onClick={() => setModal(true)}>Click Here</button>
+      <Modal
+        isVisible={isModal}
+        title="Modal Title"
+        content={<p>Add your content here</p>}
+        footer={<button>Cancel</button>}
+        onClose={() => setModal(false)}
       />
     </React.Fragment>
-  )
+  );
 }
 
-ReactDOM.render( <App/>, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));
 ```