CODEWITHSUNDEEP
reactjsmaterial-uimodal-dialog
JimmyTheCode
JimmyTheCode

Reputation: 5694

Suggestions for design approach to React app walkthrough

I'm about to try to create a walkthrough for a web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal component. I'm thinking I should also include some kind of arrow component that points the user to whichever element (button, link, etc) on my page I want them to click next. Also I will want to create a backdrop to fade the screen except for whichever element I want the users attention to be drawn to.

I feel like this must have been done many times before, but I can't find anything from searching. Obviously whenever I Google "react walkthrough/guide/intro" I just get suggestions for teaching basic React.

(NB: I'm not looking to do one of those intro sliders, as I want to provide a more detailed step-by-step)

Upvotes: 1

Views: 286

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81460

The keyword your need to search for is 'tour'. Searching on google for 'react tour', I found 2 libraries for you:

Both seem to have similar features:

  • Instruction modal that explains about an element on the page.
  • The modal is positioned next to the highlighted element.
  • The window will scroll down to the highlighted element if it's outside of the viewport.
  • The element is highlighted to bring more attention while the rest of the page is in the backdrop.
  • There are steppers on the modal to indicate which step you're on.

Upvotes: 1

Related Questions