Guide Edit

Guide Guide

Guide is a React component that renders a user guide in a modal. The guide consists of several GuidePage components which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks Finish on the last page of the guide.

Usage Usage

function MyTutorial() {
    const [ isOpen, setIsOpen ] = useState( true );

    if ( ! isOpen ) {
        return null;
    }

    <Guide onFinish={ () => setIsOpen( false ) }>
        <GuidePage>
            <p>Welcome to the ACME Store! Select a category to begin browsing our wares.</p>
        </GuidePage>
        <GuidePage>
            <p>When you find something you love, click <i>Add to Cart</i> to add the product to your shopping cart.</p>
        </GuidePage>
    </Guide>
}

Top ↑

Props Props

The component accepts the following props:

onFinish onFinish

A function which is called when the guide is finished. The guide is finished when the modal is closed or when the user clicks Finish on the last page of the guide.

  • Type: function
  • Required: Yes

Top ↑

children children

A list of GuidePage components. One page is shown at a time.

  • Required: Yes

Top ↑

className className

A custom class to add to the modal.

  • Type: string
  • Required: No

Top ↑

finishButtonText finishButtonText

Use this to customize the label of the Finish button shown at the end of the guide.

  • Type: string
  • Required: No