npm package: @onboardpad/react
Description: React component for embedding OnboardPad widgets
Author: JatinTiwari
Latest version: 1.0.2

# @onboardpad/react

React component for embedding OnboardPad widgets into your application.

## Installation

```bash
npm install @onboardpad/react
```

or

```bash
yarn add @onboardpad/react
```

or

```bash
pnpm add @onboardpad/react
```

## Usage

### Basic Usage

```javascript
import { OnboardPad } from '@onboardpad/react';

function App() {
  return (
    <div>
      <OnboardPad widgetId="your-widget-id" />
    </div>
  );
}
```

### With Callbacks

```javascript
import { OnboardPad } from '@onboardpad/react';

function App() {
  const handleSubmit = (data) => {
    console.log('Form submitted:', data);
  };

  const handleClose = () => {
    console.log('Widget closed');
  };

  return (
    <div>
      <OnboardPad
        widgetId="your-widget-id"
        onSubmit={handleSubmit}
        onClose={handleClose}
      />
    </div>
  );
}
```

### Custom API Endpoint

```javascript
import { OnboardPad } from '@onboardpad/react';

function App() {
  return (
    <div>
      <OnboardPad
        widgetId="your-widget-id"
        apiEndpoint="https://your-api.com/api"
      />
    </div>
  );
}
```

### Controlled Visibility

```javascript
import { OnboardPad } from '@onboardpad/react';
import { useState } from 'react';

function App() {
  const [showWidget, setShowWidget] = useState(false);

  return (
    <div>
      <button onClick={() => setShowWidget(true)}>
        Show Onboarding
      </button>

      {showWidget && (
        <OnboardPad
          widgetId="your-widget-id"
          autoShow={true}
          onClose={() => setShowWidget(false)}
        />
      )}
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `widgetId` | `string` | **required** | The unique identifier for your widget |
| `apiEndpoint` | `string` | `"/api"` | Custom API endpoint |
| `onSubmit` | `function` | `undefined` | Callback when form is submitted |
| `onClose` | `function` | `undefined` | Callback when widget is closed |
| `autoShow` | `boolean` | `true` | Whether to show the widget immediately |
| `className` | `string` | `""` | Custom CSS class for the container |

## TypeScript Support

This package includes TypeScript definitions. You can import types:

```typescript
import { OnboardPad, OnboardPadProps, WidgetConfig } from '@onboardpad/react';
```

## Features

- ✅ Multi-step form support
- ✅ Multiple question types (text, email, select, textarea)
- ✅ Progress indicator
- ✅ Customizable styling
- ✅ TypeScript support
- ✅ Zero dependencies (except React)
- ✅ Responsive design
- ✅ Accessible
- ✅ Easy integration

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT

## Support

For support, email jinktean@proton.me or visit our [documentation](http://onboardpad.jinkteam.com/docs).

---

### Development

Developed by [Jinkteam.com](https://jinkteam.com)

Developer: [Jatin Tiwari](https://www.linkedin.com/in/jatin-tiwari-351066302/)

Follow on [Twitter (X)](https://x.com/Jatintiwari0)