CoachMark

Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.

Installation

npm i @licuido-ui/ui_coach-mark

Import component

import { CoachMark } from '@licuido-ui/ui_coach-mark';

Usage

<CoachMark stepData={[]} showSkipButton={true} overlayBgColor={"} />

Props

| Name | Description | Default | Control | | --------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | className | Override or extend the styles applied to the component.string | "" | | rootStyle | The rootStyle prop that allows defining system overrides as well as additional CSS styles. | - | rootStyle : {} | | stepData | Array of options. | - | stepData : [0 : {...} 6 keys1 : {...} 5 keys2 : {...} 5 keys3 : {...} 5 keys4 : {...} 5 keys5 : {...} 5 keys6 : {...} 5 keys7 : {...} 5 keys] | | showSkipButton | Handle Show or Not show the Skip buttonboolean | | True | | optionsWidth | optionsWidth will take up the width of its container | - | | tooltipFooterStyle | The tooltipFooterStyle prop that allows defining system overrides as well as additional CSS styles. | - | tooltipFooterStyle : {} | | tooltipTitleStyle | The tooltipTitleStyle prop that allows defining system overrides as well as additional CSS styles. | - | tooltipTitleStyle : {} | | tooltipTitleColor | The tooltipTitleColor prop that allows to change color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | tooltipTitleFontSize | The tooltipTitleFontSize prop that allows to change Font size | - | | overlayStyle | The overlayStyle prop that allows defining system overrides as well as additional CSS styles. | - | overlayStyle : {} | | overlayBgColor | The overlayBgColor prop that allows to change overlay Background color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | spotlightStyle | The spotlightStyle prop that allows defining system overrides as well as additional CSS styles. | - | spotlightStyle : {} | | spotlightBgColor | The spotlightBgColor prop that allows to change Background color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | beaconStyle | The beaconStyle prop that allows defining system overrides as well as additional CSS styles. | - | beaconStyle : {} | | beaconSize | The beaconSize prop that allows to change Font size | - | | beaconInnerBgColor | The beaconInnerBgColor prop that allows to change overlay Background color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | beaconOuterColor | The beaconOuterColor prop that allows to change outer color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | beaconInnerStyle | The beaconInnerStyle prop that allows defining system overrides as well as additional CSS styles. | - | beaconInnerStyle : {} | | beaconOuterStyle | The beaconOuterStyle prop that allows defining system overrides as well as additional CSS styles. | - | beaconOuterStyle : {} | | tooltipStyles | The tooltipStyles prop that allows defining system overrides as well as additional CSS styles. | - | tooltipStyles : {} | | tooltipBgColor | The tooltipBgColor prop that allows to change background color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | tooltipContentStyle | The tooltipContentStyle prop that allows defining system overrides as well as additional CSS styles. | - | tooltipContentStyle : {} | | buttonBackStyle | | - | buttonBackStyle : {} | | nextButtonStyle | The nextButtonStyle prop that allows defining system overrides as well as additional CSS styles. | - | nextButtonStyle : {color : "dark"} | | skipButtonStyle | The skipButtonStyle prop that allows defining system overrides as well as additional CSS styles. | - | skipButtonStyle : {} | | skipButtonBgColor | The skipButtonBgColor prop that allows to change background color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | nextButtonBgColor | The nextButtonBgColor prop that allows to change background color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | overlayOutColor | The overlayOutColor prop that allows to change color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | optionModalBgColor | The optionModalBgColor prop that allows to change background color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | optionModalTextColor | The optionModalTextColor prop that allows to change Text color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | optionModalArrowColor | The optionModalArrowColor prop that allows to change color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | optionModalPrimaryColor | The optionModalPrimaryColor prop that allows to change primary color | - | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));"> | | disableOverlay | To handle disable or enable overlay "true"|"" | - | True | | showProgress | To handle showProgress count in next button boolean | | True | | hideCloseButton | To handle hideCloseButton Show or not show boolean | | True | | scrollToFirstStep | boolean | | True | | spotlightPadding | To handle spotlightPadding padding in css number | 0 | | callback | To handle callback event in next | - | - | | sx | SxProps<{}> | { } | Set object | | floaterProps | Props | - | Set object | | renderingComponent | any | <></> | Set object | | tooltipComponent | any | <></> | Set object | | stepsProps | Step[] | [] | Set object | | styleProps | StylesProps | { } | Set object | | continuous | boolean | | Set boolean | | run | boolean | | Set boolean | | spotlightClicks | boolean | | Set boolean | | HandleCallBack | (data: CallBackProps) => void | () => | - |