# React (/docs/developers/react)

The React package wraps the SDK in a provider and adds hooks. It starts the widget in an effect, so it's safe with server rendering in Next.js and Remix.

Both come from one package, [`@skavelo/sdk`](https://www.npmjs.com/package/@skavelo/sdk) on npm.

```bash
npm install @skavelo/sdk
```

## SkaveloProvider [#skaveloprovider]

Put it once at the root of your app. It accepts every [`init` option](/docs/developers/sdk-reference) as a prop.

```tsx
import { SkaveloProvider } from '@skavelo/sdk/react';

<SkaveloProvider agentId="YOUR_AGENT_ID" user={currentUser && { id: currentUser.id, plan: currentUser.plan }}>
  <App />
</SkaveloProvider>
```

When the `user` prop changes, for example after sign-in, the provider calls `identify` for you.

## useSkavelo [#useskavelo]

Open the widget or ask a question from any component inside the provider.

```tsx
import { useSkavelo } from '@skavelo/sdk/react';

function ExportHelp() {
  const { ask } = useSkavelo();
  return <button onClick={() => ask('How do I export invoices?')}>Help with exports</button>;
}
```

It returns `open`, `close`, `ask`, `isReady` and `sk`, the underlying widget.

## useSkaveloEvent [#useskaveloevent]

Run code when something happens in the widget. The handler doesn't need to be memoized.

```tsx
import { useSkaveloEvent } from '@skavelo/sdk/react';

useSkaveloEvent('walkthrough_complete', ({ workflowId }) => {
  analytics.track('guide_completed', { workflowId });
});
```

## SkaveloLauncher [#skavelolauncher]

Your own button that opens the widget, for example a **Help** item in your navigation. It renders nothing until the widget is ready, so it doesn't flash during page load.

```tsx
import { SkaveloLauncher } from '@skavelo/sdk/react';

<SkaveloLauncher label="Help" className="nav-link" />
```

## SkaveloIdentify [#skaveloidentify]

Identifies the signed-in user from anywhere inside the provider, for apps that only know the user deep in the component tree.

```tsx
import { SkaveloIdentify } from '@skavelo/sdk/react';

<SkaveloIdentify user={{ id: user.id, plan: user.plan }} />
```