ChattyFormUsage.js

import React from 'react';
import ChattyForm from '../PathToChattyForm';

//import icons
import FingerPrintIcon from '../PathToFingerPrintIcon'
import AlternateEmailIcon from '../PathToAlternateEmailIcon'
import CommentIcon from '../PathToCommentIcon'

//ChattyForm props:
//inputs: Array[{},{},{},...,{},{},[string],[string]]
// accepted input object for the inputsArray:
// {
//      add:[string,string,string,...,string],  //<-- message to request this input
//      edit:[string,string,string,...,string], //<-- message to show when this input is being edited
//      label:string,                           //<--label on the input field
//      icon:<Component/> //<=== optional       //<--icon 
//}
// the last two items in the input array are reserved for the review message to show after the form has been completed
// and a confirmation message after the form has been submitted
// standAlone: boolean <=== true if the chat form will be wrapped in a container as the example below


// 3 inputs, one review message and one confirmation message
const inputs = [
                  { add: ['Hey send me something, this is a regular input'], edit: ['Ok ok ok, try again sending me a regular input'], label: 'Regular Input', icon: <FingerprintIcon style={{ paddingRight: '5px', color: '#94afe0' }} /> },
                  { add: [`This is a validated input, please type in an email:`], edit: ['Could you please tell me your email one more time?'], label: 'Email Input', type: 'email', icon: <AlternateEmailIcon style={{ paddingRight: '5px', color: '#94afe0' }} /> },
                  { add: [`Ok now send me a brief message, this is a text Area input`], edit: ['Did you forget to tell me something?'], label: 'Text Area Input', type: 'textarea', icon: <CommentIcon style={{ paddingRight: '5px', color: '#94afe0' }} /> },
                  [`Review message will appear here`],
                  [`You did it!! congrats!!!`]
               ],
const Example=()=>{
  styles={
    wrapper:{
      height: '400px', 
      position: 'relative', 
      width: '100%', 
      display: 'flex', 
      justifyContent: 'center', 
      backgroundColor: 'white', 
      borderRadius: '10px', 
      margin: '0px 5px', 
      boxShadow: '-1px 2px 4px -2px'
    }
  }
  return(
          <div style={styles.wrapper}>
            <ChattyForm inputs={inputs} standAlone={true} />
          </div>

 )}

export default Example;