From 896f57328d3f9cccf7d0eb6859bbdff736df7a9e Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 27 Mar 2019 08:57:15 +0200
Subject: [PATCH] Update Modal.md

---
 snippets/Modal.md | 27 ++++++++++-----------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/snippets/Modal.md b/snippets/Modal.md
index de28e0ae1..1fe98ccf4 100644
--- a/snippets/Modal.md
+++ b/snippets/Modal.md
@@ -1,17 +1,13 @@
 ### Modal
 
 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 attribute `is-isVisible`.
+To use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute.
 
-Define `keydownHandler`, a method which handles all the Keyboard events and according to your need you can dispatch any action like when Escape is pressed close modal.
-
-The Modal Component has following attributes:
-
-- `isVisible`, Boolean describing if the modal should be shown or not.(Required)
-- `title`, String describing title of Modal.(Required)
-- `content`, JSX elements to be rendered in modal body.(Required)
-- `footer`, JSX elements to be rendered in modal footer.(optional)
-- `onClose`, Function that will be called when Modal needs to be closed like when escape key is pressed.(Required)
+* 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 {
@@ -84,9 +80,7 @@ The Modal Component has following attributes:
 ```
 
 ```jsx
-function Modal(props){
-  const { isVisible, title, content, footer, onClose } = props;
-  
+function Modal({ isVisible = false, title, content, footer, onClose }){  
   React.useEffect(() => {
     document.addEventListener('keydown', keydownHandler);
     return () => document.removeEventListener('keydown', keydownHandler);
@@ -117,8 +111,7 @@ function Modal(props){
 ```
 
 ```jsx
-//Add the component to render function
-
+//Add the component to the render function
 function App() {
   const [ isModal, setModal] = React.useState(false);
   
@@ -139,6 +132,6 @@ function App() {
 ReactDOM.render( <App/>, document.getElementById('root'));
 ```
 
-<!-- tags: visual,children,state,effect -->
+<!-- tags: visual,effect -->
 
-<!-- expertise: 1 -->
\ No newline at end of file
+<!-- expertise: 2 -->