Install for React

Wrap your app in PlayStepProvider; mark anchors with guideAnchor and report events with useTrack.

Terminal

npm i @playstep/react

Wrap your app once, near the root, and pass the signed-in user:

React

import { PlayStepProvider } from '@playstep/react'

export function Root() {
  const user = useCurrentUser()
  return (
    <PlayStepProvider appKey="ps_pub_dev_your_key" user={user ? { id: user.id, traits: { plan: user.plan } } : null}>
      <App />
    </PlayStepProvider>
  )
}

When user changes, PlayStep re-identifies. When it becomes null (sign-out), PlayStep forgets the user and their progress on this device.

Mark anchors

Spread guideAnchor onto the element a step points at:

React

import { guideAnchor } from '@playstep/react'

<button {...guideAnchor('new-invoice-btn')} onClick={createInvoice}>New invoice</button>

It is the same as writing data-guide="new-invoice-btn".

Report events and start guides

React

import { usePlayStep, useTrack } from '@playstep/react'

function InvoicesPage() {
  useTrack('invoice_page_opened')
  const playstep = usePlayStep()
  return <button onClick={() => playstep.start('create-first-invoice')}>Show me how</button>
}

The guide UI renders in PlayStep's own element with a shadow root, outside your React tree, so it never clashes with your components or CSS.

Every export is in the React reference.