Common Style

Icon-Set

All the icon in the chatapp can be customized by passing icon as object of svg or react components in iconSet.

import { FcCallback,FcSms } from "react-icons/fc";

const iconSetObject={

mf_CallLogs:<FcCallback />,

mf_NewChat: <FcSms />,

mf_DotMenu: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><circle cx="128" cy="128" r="24" fill="none" stroke="#3F51B5" stroke-miterlimit="10" stroke-width="16" /><circle cx="128" cy="48" r="24" fill="none" stroke="#2196F3" stroke-miterlimit="10" stroke-width="16" /><circle cx="128" cy="208" r="24" fill="none" stroke="#009688" stroke-miterlimit="10" stroke-width="16" /></svg>,

}

<ChatApp

licenseKey="********************"

userIdentifier="**************"

iconSet={iconSetObject}

/>

The iconSet prop is provided with the iconSetObject which is constructed with the the default variables for chatapp with the svg and react component from react icons and with the object ChatApp changes its icons as provided to iconSet.

Text Styling

The text styling is also handled in the colorSet Prop. Each text's style is handled by below mentioned variable of objects.

const colorSetObject={

regular: " SFUIDisplayRegular, sans-serif",

light: " SFUIDisplayLight, sans-serif",

medium: " SFUIDisplayMedium, sans-serif",

bold: " SFUIDisplayBold, sans-serif",

black: " SFUIDisplayBlack, sans-serif",

semibold: " SFUIDisplaySemibold, sans-serif",

thin: " SFUIDisplayThin, sans-serif",

heavy: " SFUIDisplayHeavy, sans-serif",

ultralight: " SFUIDisplayUltralight, sans-serif",

regularNova: " ProximaNova-Regular, sans-serif",

lightNova: " ProximaNova-Light, sans-serif",

SemiboldNova: " ProximaNova-Semibold, sans-serif",

boxLayoutBg: "#D8DBE3",

parentTopGap: " 0px",

maxParentheight: " calc(100vh - var(--parent-top-gap))",

}

<ChatApp

licenseKey="********************"

userIdentifier="**************"

colorSet={colorSetObject}

/>