Update README.md

README.md

+## How to install SkyId in new project React?
+### `1. Install dependencies :`
+
+
+* ~  run :
+                            
+ npm install skyid-sdk-web
+
+ npm install jquery // version 3.7.0
+
+
+
+### `2.In your components import the Jquery and the SDK Web :`
+      
+    import $ from 'jquery';
+    import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_v1.js' file
+       ...
+
+
+                        
+### `3.copy the code bellow inside the mouted(){...} lifecycle Hook:`
+
+     mounted(){
+    skyid_imp.initViewComponent()
+    // init SDK
+    skyid_imp.skyid_fa_remote_sdk_initialization()
+
+    $( document ).ready(function() {
+    $("#skyid_fa_document_container").show(500);
+
+    $( "#skyid_da_smart_ocr_button" ).click(function() {
+            skyid_imp.skyid_fa_auth_request_smart_ocr();
+            $("#skyid_da_smart_ocr_button").prop('disabled', true);
+            $("#skyid_da_smart_ocr_button").html("extraction d'information en cours ...");
+    });
+
+    $( "#skyid_fa_next" ).click(function() {
+        $( "#skyid_fa_start_button" ).show()
+      skyid_imp.show_matching_step();
+    });
+
+    $( "#skyid_fa_start_button" ).click(function() {
+              // start SDK face analysis
+              skyid_imp.start_face_scan() ;
+                   $( "#skyid_fa_start_button" ).hide();
+                   $( "#msg" ).html("Scanne de visage en cours ....");
+     });
+
+    });
+
+    const fileSelector = document.getElementById('file-upload');
+      fileSelector.addEventListener('change', (event) => {
+    const myimage = event.target.files[0];
+    skyid_imp.readImage(myimage);
+      });
+
+    // demo call
+    skyid_imp.skyid_fa_auth_request_smart_ocr_recover("1671122267893033679")
+    }
+
+  
+
+                        
+### `4.Copy the HTML code :`
+                            
+<div class="wrapper">
+  <div id="skyid_fa_document_container">
+          
+    <div id="skyid_document_browser">
+        <label For="file-upload" class="custom-file-upload" id="doc_file_label">
+             Charger votre document ici
+        </label>
+        <input id="file-upload" type="file" value="" accept="image/png, image/jpeg"/>
+        <button   id="skyid_da_smart_ocr_button" class="button-36" role="button">Extraire les information de document</button>
+        <button   id="skyid_fa_next" class="button-36" role="button">Suivant</button>
+        <br/><br/>
+        <img id="doc_img" src='../assets/no-img-placeholder.png' width="640px" height="480px" alt=""/>
+        <p id="extracted_feilds"></p>
+    </div>
+    <div id="liveness_frame">
+        <div id="skyid_liveness" ></div>
+        <br/><br/>
+        <button   id="skyid_fa_start_button" class="button-36" role="button">Démarrer</button>
+        <br/>
+        <div id="msg"></div>
+        
+    </div>
+  </div>
+  
+  
+  
+  
+
+                        
+### `5.Add CSS style:`
+                            
+
+     html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    background-color: #f5f5f5;
+    display: table;
+    }
+
+    footer {
+    background-color: black;
+    font-size:12px;
+    display: table-row;
+    padding: 20px;
+    height: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    }
+
+    .column {
+    float: left;
+    padding: 20px;
+    }
+
+    /* Clear floats after the columns */
+    .row:after {
+    content: "";
+    display: table;
+    clear: both;
+    }
+    .button-36 {
+    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+    border-radius: 8px;
+    border-style: none;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    cursor: pointer;
+    flex-shrink: 0;
+    font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    height: 4rem;
+    padding: 0 1.6rem;
+    text-align: center;
+    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+    transition: all .5s;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    }
+
+    .button-36:hover {
+    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+    transition-duration: .1s;
+    }
+
+    @media (min-width: 768px) {
+    .button-36 {
+     padding: 0 2.6rem;
+     }
+     }
+
+     input[type="file"] {
+    display: none;
+    }
+
+     .custom-file-upload {
+     border: 1px solid #ccc;
+     background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+     border-radius: 8px;
+     color: #FFFFFF;
+    flex-shrink: 0;
+    font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+    display: inline-block;
+    padding: 6px 12px;
+    cursor: pointer;
+    }
+
+    .custom-file-upload:hover {
+    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+    transition-duration: .1s;
+    }
+
+    #skyid_fa_document_container{
+      margin: auto;
+    width: 90%;
+    text-align: center;
+    }
+    #skyid_da_smart_ocr_button, #skyid_fa_next,#skyid_fa_document_container,#skyid_fa_start_button{
+      display: none;
+    }
+    #extracted_feilds{
+      display:none;
+    border: 2px solid #000;
+    overflow: scroll;
+    }
+    #liveness_frame{
+    display: none;
+    text-align: center;
+    }
+    #skyid_liveness{
+    display: flex;
+    justify-content: center;
+    }
+
+
+
+
 # skyid-vuejs
 
 ## Project setup