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:
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
}
interface AppGuideStep {
title?: any,
selector?: string, // css selector like "#some-id" or ".some-class"
content: any,
action?: (args: AppGuideStepActionArgs) => void
}
interface AppGuideStepActionArgs {
stepIndex: number
}