React · PlayStep

React

PlayStepProvider, usePlayStep, useTrack and guideAnchor from @playstep/react.

@playstep/react is a thin layer over @playstep/web. Guides render in PlayStep's own shadow root, never inside your React tree.

PlayStepProvider

Starts PlayStep once and keeps the signed-in user in sync. It renders only its children.

React

import { PlayStepProvider } from '@playstep/react'

<PlayStepProvider appKey="ps_pub_prod_your_key" user={user ? { id: user.id, traits: { plan: user.plan } } : null} locale="en">
  <App />
</PlayStepProvider>

Prop	What it does
`appKey`	Your publishable key.
`user`	`{ id, traits? }` for the signed-in user. Changing it re-identifies; `null` after sign-out resets the device.
other props	Any `init` option: `apiBase`, `locale`, `autoPageViews`, `onEvent`, `config`, `preview`.

usePlayStep

Returns the SDK: track, start, complete, page, openLauncher, identify and reset.

React

import { usePlayStep } from '@playstep/react'

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

useTrack

Reports an event when the component mounts, and again when the event name changes. Pass null to skip.

React

import { useTrack } from '@playstep/react'

function InvoicesPage() {
  useTrack('invoice_page_opened')
  return <InvoiceList />
}

guideAnchor

Props that mark an element as an anchor.

React

import { guideAnchor } from '@playstep/react'

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

playstep

The SDK itself, for code outside components:

TypeScript

import { playstep } from '@playstep/react'

router.afterEach(() => playstep.track('route_changed'))