product-guide

Repository includes React plugin

Product Guide Widget

Usage:

import ProductGuide, {VerticalPosition, HorizontalPosition} from "product-guide"; // there're also type exports

     <ProductGuide
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          verticalPosition={VerticalPosition.Center}
          horizontalPosition={HorizontalPosition.Right}
          steps={[
            {
              selector: "#item1",
              content: () => <span>test content</span>,
            },
            {
              title: "Very long texttttttttttttttttttttttttttttttttttttttttttttttt",
              selector: ".profile-text",
              content: "This one is used for example",
            },
            {
              title: "Yeah, that's the step title",
              selector: ".profile-picture",
              content: "This is your profile picture",
              action: ({stepIndex}) => {
                // here you can do redirect to another page
              }
            }
          ]}
    />

Done !

Types:

AppGuideStep

type Props = {
    palette?: string, // main color theme for the widget
    steps: AppGuideStep[],
    isOpen: boolean,
    closeOnMaskClick?: boolean, // if true, the user can close the widget by clicking on the black mask
    onClose: () => void, // callback for clicking on the X (close) button
    verticalPosition?: VerticalPosition, // prefered vertical position (won't be used if there's no enough space)
    horizontalPosition?: HorizontalPosition, // prefered horizontal position (won't be used if there's no enough space)
    activeStepIndex?: number
    setActiveStepIndex?: (stepIndex: number) => void
}

AppGuideStepActionArgs

interface AppGuideStep {
    title?: any,
    selector?: string, // css selector like "#some-id" or ".some-class"
    content: any,
    action?: (args: AppGuideStepActionArgs) => void
}

interface AppGuideStepActionArgs {
    stepIndex: number
}