### Basic YbugProvider Setup

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/README.md

Wrap your application with YbugProvider and provide your Ybug workspace ID.

```typescript
import { YbugProvider } from 'ybug-react';

function App() {
  return (
    <YbugProvider ybugId="your-ybug-workspace-id">
      <YourAppContent />
    </YbugProvider>
  );
}
```

--------------------------------

### Minimal YbugProvider Setup

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/configuration.md

Basic setup for the YbugProvider component. Ensure you replace 'your-ybug-id' with your actual Ybug ID.

```typescript
<YbugProvider ybugId="your-ybug-id">
  <App />
</YbugProvider>
```

--------------------------------

### Basic SetUserType Example

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/types.md

Demonstrates the minimal required fields for creating a SetUserType object.

```typescript
// Basic usage
const basicUser: SetUserType = {
  id: '12345',
  name: 'John Doe',
  email: 'john@example.com'
};
```

--------------------------------

### Install ybug-react with npm

Source: https://github.com/avallete/ybug-react/blob/master/README.md

Install the ybug-react package using npm. This is the first step to integrate the widget into your React application.

```bash
npm install --save ybug-react
```

--------------------------------

### useYbugApi

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/MANIFEST.md

Documentation for the useYbugApi hook, including its signature, parameters, return value, behavior, and examples.

```APIDOC
## useYbugApi

### Description
A hook to access the Ybug API instance within functional components.

### Signature
() => YbugApi

### Parameters
None

### Return
YbugApi - An instance of the Ybug API.

### Behavior
Returns the Ybug API object from the context. Requires being used within a component wrapped by YbugProvider.

### Examples
```jsx
const ybugApi = useYbugApi();
ybugApi.open();
```
```

--------------------------------

### Setup YbugProvider and useYbugApi Hook

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Import and set up the YbugProvider by wrapping your app. Then, use the useYbugApi hook within components to access Ybug functionalities like opening feedback forms or initializing settings.

```typescript
import { YbugProvider, useYbugApi } from 'ybug-react';
import type { YbugSettings, YbugContextType } from 'ybug-react';

// Setup: wrap your app
<YbugProvider ybugId="your-id">
  <App />
</YbugProvider>

// Use: call the hook in any component
const context: YbugContextType | null = useYbugApi();
context?.Ybug?.open('feedback');
context?.init({ ... });
```

--------------------------------

### Multi-language Setup with Translations

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/configuration.md

Configure Ybug for multiple languages, specifying a default language override and providing translation objects for each language.

```typescript
<YbugProvider 
  ybugId="your-ybug-id"
  settings={{
    language_override: 'fr',
    translations: {
      en: {
        'launcherButton.Title': 'Send feedback',
        'feedbackForm.Heading': 'Your feedback'
      },
      fr: {
        'launcherButton.Title': 'Envoyer des commentaires',
        'feedbackForm.Heading': 'Vos commentaires'
      },
      es: {
        'launcherButton.Title': 'Enviar comentarios',
        'feedbackForm.Heading': 'Tus comentarios'
      }
    }
  }}
>
  <App />
</YbugProvider>
```

--------------------------------

### Ybug Translation Settings Example

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/types.md

Demonstrates how to configure translation keys for the Ybug widget, including default translations and language-specific overrides.

```typescript
const settings: YbugSettings = {
  translate: {
    'launcherButton.Title': 'Report a Problem',
    'feedbackForm.Heading': 'Share Your Feedback',
    'feedbackForm.ButtonSubmit': 'Send Report'
  },
  translations: {
    fr: {
      'launcherButton.Title': 'Signaler un problème',
      'feedbackForm.Heading': 'Partagez vos commentaires'
    },
    es: {
      'launcherButton.Title': 'Reportar un problema',
      'feedbackForm.Heading': 'Comparte tus comentarios'
    }
  }
};
```

--------------------------------

### Complete Ybug React Integration Example

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/README.md

This snippet shows how to wrap your application with YbugProvider, use the useYbugApi hook to interact with the Ybug API, and dynamically update settings.

```typescript
import React from 'react';
import { YbugProvider, useYbugApi } from 'ybug-react';

// 1. Wrap your app with YbugProvider
export function App() {
  return (
    <YbugProvider
      ybugId="your-ybug-id"
      settings={{
        hide_launcher: false,
        launcher_position: 'bottom-right',
        language_override: 'en',
        feedback: {
          email: 'user@example.com',
          name: 'User Name'
        }
      }}
    >
      <div>
        <h1>My App</h1>
        <FeedbackSection />
        <ErrorHandler />
      </div>
    </YbugProvider>
  );
}

// 2. Use the hook to access the API
function FeedbackSection() {
  const ybugContext = useYbugApi();

  if (!ybugContext?.Ybug) {
    return <p>Loading feedback widget...</p>;
  }

  return (
    <div>
      <button onClick={() => ybugContext.Ybug.open('feedback')}>
        Send Feedback
      </button>
      <button onClick={() => ybugContext.Ybug.open('annotate')}> 
        Report with Screenshot
      </button>
    </div>
  );
}

// 3. Update settings dynamically
function ErrorHandler() {
  const ybugContext = useYbugApi();

  const reportError = (error: Error) => {
    ybugContext?.init({
      feedback: {
        comment: `Error: ${error.message}`
      }
    });
    ybugContext?.Ybug?.open('feedback');
  };

  return (
    <button onClick={() => reportError(new Error('Test error'))}>
      Report Error
    </button>
  );
}

```

--------------------------------

### YbugProvider Basic Setup

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Use this snippet to set up the YbugProvider with a required ybugId. This is the most basic configuration for integrating Ybug into your React application.

```typescript
import { YbugProvider } from 'ybug-react';

function App() {
  return (
    <YbugProvider ybugId="your-ybug-id">
      <YourAppContent />
    </YbugProvider>
  );
}
```

--------------------------------

### YbugProvider

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/MANIFEST.md

Documentation for the YbugProvider component, including its signature, parameters, return value, behavior, and examples.

```APIDOC
## YbugProvider

### Description
Provides the Ybug context and configuration to the application.

### Signature
(props: YbugProviderProps)

### Parameters
#### Props
- **children** (React.ReactNode) - Required - The child components to be rendered within the provider.
- **config** (YbugSettings) - Required - The configuration object for Ybug.

### Return
React.ReactElement

### Behavior
Wraps the application in the Ybug context, making the API available to child components.

### Examples
```jsx
<YbugProvider config={settings}>
  <App />
</YbugProvider>
```
```

--------------------------------

### Example Usage of useYbugApi Hook

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/types.md

Demonstrates how to use the useYbugApi hook within a React component to access the Ybug API and its initialization function. Handles cases where the context or API is not yet available.

```typescript
import { useYbugApi } from 'ybug-react';

function MyComponent() {
  const context: YbugContextType | null = useYbugApi();

  if (!context) {
    return <p>Not inside YbugProvider</p>;
  }

  if (!context.Ybug) {
    return <p>Widget loading...</p>;
  }

  return (
    <>
      <button onClick={() => context.Ybug.open('feedback')}>
        Send Feedback
      </button>
      <button onClick={() => context.init({ hide_launcher: true })}>
        Hide Launcher
      </button>
    </>
  );
}
```

--------------------------------

### boot()

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Reinitializes the Ybug widget with the current settings. This is typically used internally to restart the widget after configuration changes.

```APIDOC
## boot()

### Description
Reinitializes the Ybug widget with current settings.

### Method
boot(): void
```

--------------------------------

### show()

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Displays the Ybug launcher button on the page. An optional parameter can specify showing only the launcher.

```APIDOC
## show(opt?: 'launcher')

### Description
Display the Ybug launcher button.

### Method
show(opt?: 'launcher'): void

### Parameters
#### Query Parameters
- **opt** ('launcher') - Optional - Specifies showing the launcher. If omitted, the launcher is shown by default.
```

--------------------------------

### Dynamic Configuration Update via init()

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/configuration.md

Update Ybug configuration at runtime using the `init()` function from the `useYbugApi()` hook. This allows for dynamic changes to widget settings.

```typescript
import { useYbugApi } from 'ybug-react';

function MyComponent() {
  const ybugContext = useYbugApi();

  const handleConfigChange = () => {
    ybugContext?.init({
      hide_launcher: true,
      feedback: {
        email: 'newemail@example.com',
        name: 'New Name'
      }
    });
  };

  return <button onClick={handleConfigChange}>Update Config</button>;
}
```

--------------------------------

### YbugProvider with Initial Settings

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Configure the Ybug widget with initial settings such as hiding the launcher or pre-filling feedback details. These settings can be overridden later using the init() function.

```typescript
import { YbugProvider } from 'ybug-react';

function App() {
  return (
    <YbugProvider 
      ybugId="your-ybug-id"
      settings={{
        hide_launcher: false,
        feedback: {
          name: "John Doe",
          email: "john@example.com"
        },
        launcher_position: 'bottom-right'
      }}
    >
      <YourAppContent />
    </YbugProvider>
  );
}
```

--------------------------------

### Programmatically Trigger Ybug Report

Source: https://github.com/avallete/ybug-react/blob/master/README.md

Use the useYbugApi hook to get access to the Ybug API instance. Call the open method with 'feedback' to programmatically trigger the ybug report pop-up.

```tsx
import * as React from "react";
import { useYbugApi } from "~/config/ybug/YbugContext";

function ErrorPage() {
  const YbugContext = useYbugApi();
  const YbugApi = YbugContext?.Ybug;

  const openYbugReport = () => {
    if (YbugApi) {
      YbugApi.open("feedback");
    }
  };

  return (
    <div>
        <span>
            An error happened. Please contact our team
        </span>
        <button onClick={actions.openYbugReport}>
            Tell us more
        </button>
    </div>
  );
}

export { ErrorPage };
```

--------------------------------

### Display Ybug Launcher

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Use `show()` to display the Ybug launcher button. An optional 'launcher' parameter can be provided, but it is the default behavior if omitted.

```typescript
show(opt?: 'launcher'): void
```

--------------------------------

### Importing ybug-react Components and Types

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Demonstrates how to import the main components, hooks, and types from the ybug-react library into your project.

```typescript
import { YbugProvider, useYbugApi } from 'ybug-react';
import type {
  YbugApi,
  YbugSettings,
  SetUserType,
  YbugContextType,
  YbugProviderProps,
  YbugTranslationKey
} from 'ybug-react';
```

--------------------------------

### Basic Component Import

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/module-structure.md

Import the main YbugProvider component to wrap your application or relevant sections.

```typescript
import { YbugProvider } from 'ybug-react';
```

--------------------------------

### Launcher Positions

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Defines the possible string values for positioning the Ybug launcher on the screen.

```plaintext
'bottom-left'   | 'bottom-right'   // Bottom corners
'left-middle'   | 'right-middle'   // Middle sides
'top-middle'                        // Top center
```

--------------------------------

### YbugApi Methods

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/MANIFEST.md

Reference for all available YbugApi methods, including their signatures, parameters, return values, and behavior.

```APIDOC
## YbugApi Methods

### open
#### Description
Opens the Ybug feedback widget.
#### Signature
() => void

### close
#### Description
Closes the Ybug feedback widget.
#### Signature
() => void

### isOpen
#### Description
Checks if the Ybug feedback widget is currently open.
#### Signature
() => boolean

### submit
#### Description
Submits the current feedback form.
#### Signature
() => Promise<void>

### reset
#### Description
Resets the feedback form to its initial state.
#### Signature
() => void

### setLocale
#### Description
Sets the locale for the Ybug widget.
#### Signature
(locale: string) => void

### setStep
#### Description
Navigates to a specific step in the feedback form.
#### Signature
(step: string) => void

### setUserType
#### Description
Sets the type of the current user.
#### Signature
(userType: SetUserType) => void

### setTags
#### Description
Sets custom tags for the feedback.
#### Signature
(tags: string[]) => void

### setMetadata
#### Description
Sets custom metadata for the feedback.
#### Signature
(metadata: Record<string, any>) => void

### setOption
#### Description
Sets a specific option for the Ybug widget.
#### Signature
(option: string, value: any) => void

### setOptions
#### Description
Sets multiple options for the Ybug widget.
#### Signature
(options: Record<string, any>) => void

### destroy
#### Description
Destroys the Ybug widget instance.
#### Signature
() => void
```

--------------------------------

### Autofill Form with User Data using useYbugApi

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Shows how to use useYbugApi to initialize the Ybug widget with user data, such as email and name, when the user's state changes. This requires the Ybug API to be loaded.

```typescript
import { useYbugApi } from 'ybug-react';
import React from 'react';

function UserFeedbackSetup() {
  const ybugContext = useYbugApi();
  const [user, setUser] = React.useState({ email: '', name: '' });

  React.useEffect(() => {
    if (ybugContext?.Ybug && user.email) {
      ybugContext.init({
        feedback: {
          email: user.email,
          name: user.name
        }
      });
    }
  }, [user, ybugContext]);

  return <div>Feedback configured</div>;
}
```

--------------------------------

### Initialize YbugProvider and Use useYbugApi Hook

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/INDEX.md

Wrap your application with YbugProvider and use the useYbugApi hook to access Ybug functionalities like opening feedback forms.

```typescript
import { YbugProvider, useYbugApi } from 'ybug-react';

// 1. Wrap your app
<YbugProvider ybugId="your-id">
  <App />
</YbugProvider>

// 2. Use the hook
function FeedbackButton() {
  const context = useYbugApi();
  return (
    <button onClick={() => context?.Ybug?.open('feedback')}>
      Send Feedback
    </button>
  );
}
```

--------------------------------

### Reinitialize Ybug Widget

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Call `boot()` to reinitialize the Ybug widget with current settings. This is used internally by `init()` to restart the widget after settings changes.

```typescript
boot(): void
```

--------------------------------

### Basic Usage of useYbugApi

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Demonstrates how to use the useYbugApi hook to check if the Ybug API is loaded and conditionally render a button to send feedback. Ensure YbugProvider is set up in your component tree.

```typescript
import { useYbugApi } from 'ybug-react';

function FeedbackButton() {
  const ybugContext = useYbugApi();

  if (!ybugContext?.Ybug) {
    return <p>Loading...</p>;
  }

  return (
    <button onClick={() => ybugContext.Ybug.open('feedback')}>
      Send Feedback
    </button>
  );
}
```

--------------------------------

### open()

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Opens the Ybug widget in a specified mode, such as 'annotate' for screenshots or 'feedback' for forms. If no mode is specified, the default behavior is used.

```APIDOC
## open(opt?: 'annotate' | 'feedback')

### Description
Open the Ybug widget in a specific mode.

### Method
open(opt?: 'annotate' | 'feedback'): void

### Parameters
#### Query Parameters
- **opt** ('annotate' | 'feedback') - Optional - The mode to open: 'feedback' opens the feedback form, 'annotate' opens screenshot annotation mode. If omitted, the default behavior is used.
```

--------------------------------

### Autofill User on Login

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Automatically populates Ybug user and feedback details when a user logs in. Ensure `user` and `context` are available.

```typescript
useEffect(() => {
  if (user && context?.Ybug) {
    context.init({
      user: { id: user.id, name: user.name, email: user.email },
      feedback: { email: user.email, name: user.name }
    });
  }
}, [user, context]);
```

--------------------------------

### YbugSettings

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/types.md

Configuration options for the Ybug widget, used during initialization and when calling init().

```APIDOC
## YbugSettings

### Description
Configuration options for the Ybug widget, used during initialization and when calling `init()`.

### Properties

- **feedback**?: {
    comment?: string;
    rating?: number;
    email?: string;
    name?: string;
  }
- **user**?: SetUserType
- **anonymize_elements**?: string
- **language_override**?: string
- **launcher_position**?: 'bottom-left' | 'bottom-right' | 'left-middle' | 'right-middle' | 'top-middle'
- **widget_position**?: 'center' | 'left' | 'right'
- **skip_to**?: 'feedback'
- **hide_launcher**?: boolean
- **console_log**?: boolean
- **launcherButton**?: never
- **translate**?: {
    [key in YbugTranslationKey]?: string;
  }
- **translations**?: {
    [languageCode: string]: {
      [key in YbugTranslationKey]?: string;
    };
  }
- **rating**?: boolean
- **rating_required**?: boolean
- **comment**?: boolean
- **comment_required**?: boolean
- **name**?: boolean
- **name_required**?: boolean
- **email**?: boolean
- **email_required**?: boolean
- **type**?: boolean
- **type_required**?: boolean
- **title**?: boolean
- **title_required**?: boolean
- **priority**?: boolean
- **priority_required**?: boolean
- **phone**?: boolean
- **phone_required**?: boolean
- **nps**?: boolean
- **nps_required**?: boolean
- **close_countdown**?: number
- **shortcut**?: boolean
- **nonce**?: string
- **onload**?: () => unknown
- **onopen**?: () => unknown
- **onbeforesend**?: () => unknown
- **oncancel**?: () => unknown
- **onclose**?: () => unknown
```

--------------------------------

### Security Configuration with CSP Nonce

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/configuration.md

Configure security settings including a CSP nonce for Content Security Policy and anonymize sensitive input fields.

```typescript
<YbugProvider 
  ybugId="your-ybug-id"
  settings={{
    nonce: "abc123def456xyz789",
    anonymize_elements: ".credit-card-input, .ssn-input, .password-field"
  }}
>
  <App />
</YbugProvider>
```

--------------------------------

### Pre-populate User Information

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/configuration.md

Pre-populate user details and feedback sender information. This can streamline the feedback process for logged-in users.

```typescript
<YbugProvider 
  ybugId="your-ybug-id"
  settings={{
    user: {
      id: 'user-123',
      name: 'John Doe',
      email: 'john@example.com',
      phone: '+1-555-0123',
      department: 'Engineering'
    },
    feedback: {
      email: 'john@example.com',
      name: 'John Doe'
    }
  }}
>
  <App />
</YbugProvider>
```

--------------------------------

### Type Checking for Ybug Context and API

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Illustrates how to safely access and use the Ybug context and API, including checks for null values and loading states.

```typescript
// Check if context exists
const context = useYbugApi();
if (!context) {
  // Used outside YbugProvider
}

// Check if API loaded
if (context?.Ybug) {
  // Safe to call Ybug methods
}

// Type-safe usage
const ybugContext: YbugContextType | null = useYbugApi();
```

--------------------------------

### Autofill Ybug Forms with User Info

Source: https://github.com/avallete/ybug-react/blob/master/README.md

Use the useYbugApi hook to access the Ybug context and initialize the widget with user-specific data like email, name, and language. This is useful for pre-filling feedback forms.

```tsx
import {useYbugApi} from 'ybug-react';

function useUserConnection(props: {userId: string}) {
    const YbugContext = useYbugApi();
    const {data} = useUserDataFetching(props.userId);

    const currentUser = data?.user;
    React.useEffect(() => {
        if (currentUser && YbugContext.Ybug) {
            YbugContext.init({
                feedback: {
                    // Autofill feedback forms with user email and name
                    email: currentUser.contact?.email ?? "",
                    name: currentUser.full_name ?? "",
                },
                // Make ybug use the user language
                language_override: currentUser.language,
                // Add custom user infos
                user: {
                    email: currentUser.contact?.email ?? "",
                    ...
                },
            });
        }
    }, [currentUser, YbugContext])
}
```

--------------------------------

### Configure Widget Lifecycle Hooks

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/configuration.md

Use these callbacks to execute custom logic at different stages of the widget's lifecycle, such as when it loads, opens, is about to send feedback, is canceled, or closes.

```typescript
settings={
  onload: () => {
    // Widget script has loaded and widget.Ybug is available
  },
  onopen: () => {
    // User clicked launcher or open() was called
  },
  onbeforesend: () => {
    // User clicked submit button, about to send feedback
    // Can be used for last-minute validation
  },
  oncancel: () => {
    // User clicked cancel button
  },
  onclose: () => {
    // Dialog closed by any means (submit, cancel, or manual close)
  }
}
```

--------------------------------

### Wrap App with YbugProvider

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/integration-guide.md

Wrap your application's root component with YbugProvider and provide your Ybug workspace ID.

```typescript
import React from 'react';
import { YbugProvider } from 'ybug-react';
import MyApp from './MyApp';

export default function App() {
  return (
    <YbugProvider ybugId="your-ybug-workspace-id">
      <MyApp />
    </YbugProvider>
  );
}
```

--------------------------------

### YbugProvider Component Props

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Configure the YbugProvider with your workspace ID and optional settings. The 'ybugId' is required for initialization. The 'settings' prop can be used for initial configuration and updated later via the init() method.

```typescript
<YbugProvider
  ybugId="string"              // Required. Your Ybug workspace ID
  url="string"                 // Optional. Custom widget script URL
  settings={YbugSettings}      // Optional. Initial configuration
>
  {children}                   // Required. React components
</YbugProvider>
```

--------------------------------

### YbugContextType Methods

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/INDEX.md

Methods available on the Ybug context type, primarily for initialization purposes.

```APIDOC
## Methods on YbugContextType

### Description
Provides access to initialization and context-related methods.

### Available Methods
- **init()**: Initializes the Ybug context.

### Usage Example
```jsx
const context = useYbugApi();
context?.init();
```
```

--------------------------------

### Combined Import

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/module-structure.md

Import both components and hooks, along with specific types, in a single import statement for convenience.

```typescript
import { YbugProvider, useYbugApi } from 'ybug-react';
import type { YbugSettings, SetUserType } from 'ybug-react';
```

--------------------------------

### Ybug Provider with Callbacks

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/configuration.md

Integrate callback functions for various Ybug widget events: onload, onopen, onbeforesend, oncancel, and onclose.

```typescript
<YbugProvider 
  ybugId="your-ybug-id"
  settings={{
    onload: () => {
      console.log('Ybug widget loaded');
    },
    onopen: () => {
      console.log('Feedback dialog opened');
    },
    onbeforesend: () => {
      console.log('About to send feedback');
    },
    oncancel: () => {
      console.log('User cancelled feedback');
    },
    onclose: () => {
      console.log('Feedback dialog closed');
    }
  }}
>
  <App />
</YbugProvider>
```

--------------------------------

### React Context Creation

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/module-structure.md

Defines the React context for Ybug, initialized with null. Accessing context outside the provider will return null.

```typescript
const YbugContext = React.createContext<YbugContextType | null>(null);
```

--------------------------------

### Programmatically Trigger Ybug Modes

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Illustrates how to use the useYbugApi hook to programmatically open different Ybug widget modes, such as 'feedback' or 'annotate', based on user interactions. Ensure the Ybug API is available before calling open.

```typescript
import { useYbugApi } from 'ybug-react';

function ErrorPage() {
  const ybugContext = useYbugApi();

  const handleOpenFeedback = () => {
    ybugContext?.Ybug?.open('feedback');
  };

  const handleOpenAnnotate = () => {
    ybugContext?.Ybug?.open('annotate');
  };

  return (
    <div>
      <button onClick={handleOpenFeedback}>Report an Issue</button>
      <button onClick={handleOpenAnnotate}>Annotate Screenshot</button>
    </div>
  );
}
```

--------------------------------

### Initiate Bug Report with Screenshot Annotation

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/integration-guide.md

Use this pattern to direct users to annotation mode for detailed bug reporting. It configures Ybug for a specific feedback type and opens the annotation interface.

```typescript
import React from 'react';
import { useYbugApi } from 'ybug-react';

export function BugReportButton() {
  const ybugContext = useYbugApi();

  const handleReportBug = () => {
    if (!ybugContext?.Ybug) return;

    // Configure for bug report specifically
    ybugContext.init({
      skip_to: 'feedback',
      feedback: {
        comment: 'Bug Report',
        type: 'Bug'
      }
    });

    // Open in annotation mode for screenshot
    ybugContext.Ybug.open('annotate');
  };

  return (
    <button onClick={handleReportBug}>
      Report Bug With Screenshot
    </button>
  );
}
```

--------------------------------

### Hide Launcher, Programmatic Control

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/configuration.md

Configure Ybug to hide the launcher and control feedback programmatically. Sets 'hide_launcher' to true and 'comment_required' to true.

```typescript
<YbugProvider 
  ybugId="your-ybug-id"
  settings={{
    hide_launcher: true,
    comment_required: true
  }}
>
  <App />
</YbugProvider>
```

--------------------------------

### Named Exports from Main Entry Point

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/module-structure.md

All public API elements are exported from the main entry point of the package. This includes components, hooks, and type definitions.

```typescript
export { useYbugApi, YbugProvider };
export type {
  YbugApi,
  YbugSettings,
  SetUserType,
  YbugContextType,
  YbugProviderProps,
  YbugTranslationKey
};
```

--------------------------------

### YbugProvider Component Hierarchy

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/integration-guide.md

Illustrates the role of the `YbugProvider` in setting up the React context, loading the Ybug widget script, managing its lifecycle, and providing the API to child components via `useYbugApi()`.

```plaintext
YbugProvider
  ├── Sets up React Context with Ybug API
  ├── Loads Ybug widget script
  ├── Manages widget lifecycle
  └── Provides context to children via useYbugApi()
```

--------------------------------

### useYbugApi Hook Methods

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Interact with the Ybug widget using methods available through the useYbugApi hook. Ensure the context and context.Ybug are available before calling methods. Use init() to update settings dynamically.

```typescript
const context: YbugContextType | null = useYbugApi();

// context is null if outside YbugProvider
// context.Ybug is null until script loads

if (context?.Ybug) {
  context.Ybug.open('feedback');      // Open feedback form
  context.Ybug.open('annotate');      // Open screenshot annotation
  context.Ybug.show('launcher');      // Show launcher button
  context.Ybug.close();               // Close the dialog
  context.Ybug.destroy();             // Clean up widget
  context.Ybug.boot();                // Reinitialize
  context.Ybug.setUser({ id, name, email }); // Set user info
}

// Update settings at runtime
context?.init({
  hide_launcher: true,
  feedback: { email: 'new@email.com' }
});
```

--------------------------------

### SetUserType with Nullable Custom Fields

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/types.md

Demonstrates how nullable or undefined custom fields are handled within the SetUserType structure.

```typescript
// Nullable custom fields
const userWithNullableFields: SetUserType = {
  id: '12345',
  name: 'John Doe',
  email: 'john@example.com',
  department: null,
  company: undefined
};
```

--------------------------------

### Basic Feedback Button

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

A simple React component to open the Ybug feedback form.

```typescript
function FeedbackButton() {
  const context = useYbugApi();
  return (
    <button onClick={() => context?.Ybug?.open('feedback')}>
      Send Feedback
    </button>
  );
}
```

--------------------------------

### Wrap App with YbugProvider

Source: https://github.com/avallete/ybug-react/blob/master/README.md

Wrap your application with the YbugProvider component, providing your unique ybugId. This sets up the context for the ybug widget.

```tsx
<YbugProvider ybugId="my-ybug-id" >
    <MyApp>
</YbugProvider>
```

--------------------------------

### useYbugApi Hook

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/README.md

The useYbugApi hook allows you to access the Ybug API and its initialization functions from any component that is a descendant of YbugProvider.

```APIDOC
## useYbugApi

### Description
Access the Ybug API and init function from any component inside YbugProvider.

### Usage
```typescript
import { useYbugApi } from 'ybug-react';

function FeedbackButton() {
  const ybugContext = useYbugApi();

  return (
    <button onClick={() => ybugContext?.Ybug?.open('feedback')}>
      Send Feedback
    </button>
  );
}
```
```

--------------------------------

### Hook Import

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/module-structure.md

Import the useYbugApi hook to access Ybug functionalities within your components.

```typescript
import { useYbugApi } from 'ybug-react';
```

--------------------------------

### YbugSettings Callbacks

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Define functions to be executed at specific points in the Ybug widget's lifecycle, such as when it loads, opens, is about to submit, is cancelled, or closes.

```typescript
{
  onload: () => unknown,                         // Widget loaded
  onopen: () => unknown,                         // Dialog opened
  onbeforesend: () => unknown,                   // Before submit
  oncancel: () => unknown,                       // User cancelled
  onclose: () => unknown                         // Dialog closed
}
```

--------------------------------

### File Modes

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Indicates the operational modes for the Ybug widget, such as collecting feedback or annotating files.

```plaintext
'feedback'  | 'annotate'
```

--------------------------------

### Export Summary for ybug-react

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Lists the main components, hooks, and types exported by the ybug-react library for external use.

```typescript
// Component
export { YbugProvider }

// Hook
export { useYbugApi }

// Types
export type {
  YbugApi,
  YbugSettings,
  SetUserType,
  YbugContextType,
  YbugProviderProps,
  YbugTranslationKey
}
```

--------------------------------

### YbugApi Methods

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/README.md

A collection of methods available through the Ybug API to control the widget's behavior and appearance.

```APIDOC
## YbugApi Methods

### boot()

#### Description
Reinitialize the widget.

### show(opt?: 'launcher')

#### Description
Display the launcher button.

### open(opt?: 'annotate' | 'feedback')

#### Description
Open the widget in a specific mode.

### destroy()

#### Description
Clean up and remove the widget.

### setUser(infos: SetUserType)

#### Description
Update user information.

### close()

#### Description
Close the widget dialog.
```

--------------------------------

### Required Fields Only Configuration

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Configures the Ybug provider to only show and require specific fields. Hides all other fields by setting them to `false`.

```typescript
<YbugProvider
  ybugId="id"
  settings={{
    comment: true,
    comment_required: true,
    email: true,
    email_required: true,
    // Hide all other fields
    rating: false,
    name: false,
    title: false,
    type: false,
    priority: false,
    phone: false,
    nps: false
  }}
>
```

--------------------------------

### React Context Provider

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/module-structure.md

The YbugProvider component wraps its children, providing the Ybug API instance and initialization function through context.

```typescript
<YbugContext.Provider value={{ Ybug: ybugApi, init: initYbug }}>
  {children}
</YbugContext.Provider>
```

--------------------------------

### Type Imports (TypeScript)

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/module-structure.md

Import necessary types for defining props, context, and API structures when using TypeScript.

```typescript
import type {
  YbugApi,
  YbugSettings,
  SetUserType,
  YbugContextType,
  YbugProviderProps,
  YbugTranslationKey
} from 'ybug-react';
```

--------------------------------

### SetUserType with Custom Properties

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/types.md

Illustrates adding custom key-value pairs to the SetUserType object for additional user attributes.

```typescript
// With custom properties
const userWithCustomFields: SetUserType = {
  id: '12345',
  name: 'John Doe',
  email: 'john@example.com',
  phone: '+1-555-0123',
  department: 'Engineering',
  company: 'ACME Corp',
  subscription_level: 'pro'
};
```

--------------------------------

### TypeScript Compiler Options

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/module-structure.md

Defines the compilation settings for the TypeScript project, including JSX transformation, module system, output directory, and strictness.

```json
{
  "compilerOptions": {
    "jsx": "react",
    "target": "es6",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./lib",
    "strict": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/__tests__/*"]
}
```

--------------------------------

### Custom Widget URL Configuration

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/configuration.md

Specify a custom URL for the Ybug widget script. Useful for self-hosting or using a CDN.

```typescript
<YbugProvider 
  ybugId="your-ybug-id"
  url="https://my.custom.domain/scripts/ybug.js"
>
  <App />
</YbugProvider>
```

--------------------------------

### YbugApi Methods

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/INDEX.md

A collection of methods available on the Ybug API instance for interacting with the Ybug service. These methods allow for controlling the Ybug widget, managing user data, and handling events.

```APIDOC
## Methods on YbugApi

### Description
These methods are available via the `useYbugApi` hook and allow direct interaction with the Ybug SDK.

### Available Methods
- **boot()**: Initializes the Ybug SDK.
- **show()**: Shows the Ybug widget.
- **open(type?: string)**: Opens the Ybug widget, optionally specifying a type (e.g., 'feedback').
- **destroy()**: Destroys the Ybug SDK instance.
- **setUser(user: SetUserType)**: Sets user information for the current session.
- **close()**: Closes the Ybug widget.

### Usage Example
```jsx
const context = useYbugApi();
context?.Ybug?.boot();
context?.Ybug?.setUser({ email: 'user@example.com', name: 'John Doe' });
```
```

--------------------------------

### Update User Information with Ybug API

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Demonstrates how to update user information within the Ybug widget using the setUser method provided by the Ybug API, accessed via the useYbugApi hook. This is useful for logging in users or updating their details.

```typescript
import { useYbugApi } from 'ybug-react';
import React from 'react';

function UserProfileUpdater() {
  const ybugContext = useYbugApi();

  const handleUserLogin = (userId, userName, userEmail) => {
    ybugContext?.Ybug?.setUser({
      id: userId,
      name: userName,
      email: userEmail
    });
  };

  return (
    <button onClick={() => handleUserLogin('123', 'Jane Doe', 'jane@example.com')}> 
      Log In
    </button>
  );
}
```

--------------------------------

### YbugApi Methods

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/INDEX.md

Methods available through the Ybug API for controlling the widget's behavior.

```APIDOC
## YbugApi Methods

### Description
Methods available through the Ybug API for controlling the widget's behavior.

### Methods
- **open** `(opt?: 'annotate' | 'feedback')` - Opens the widget in either 'annotate' or 'feedback' mode.
- **show** `(opt?: 'launcher')` - Displays the launcher button.
- **close** `()` - Closes the widget dialog.
- **destroy** `()` - Cleans up and removes the widget from the DOM.
- **boot** `()` - Reinitializes the widget.
- **setUser** `(infos: SetUserType)` - Sets user information for the current session.
```

--------------------------------

### Using useYbugApi Hook

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/README.md

Access the Ybug API from a component within YbugProvider to open the widget for feedback.

```typescript
import { useYbugApi } from 'ybug-react';

function FeedbackButton() {
  const ybugContext = useYbugApi();

  return (
    <button onClick={() => ybugContext?.Ybug?.open('feedback')}>
      Send Feedback
    </button>
  );
}
```

--------------------------------

### SetUserType Interface

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Defines the structure for user information, including custom fields.

```typescript
{
  id: string;                                    // User ID
  name: string;                                  // User name
  email: string;                                 // Email address
  phone?: string | null | undefined;             // Phone (optional)
  [key: string]: string | null | undefined;      // Custom fields
}
```

--------------------------------

### YbugSettings Common Options

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/quick-reference.md

Configure various aspects of the Ybug widget, including launcher visibility and position, form field display and requirements, pre-filling feedback and user data, language settings, appearance, and other behavioral options.

```typescript
{
  // Launcher
  hide_launcher: boolean,
  launcher_position: 'bottom-right' | ...,       // Position

  // Form fields
  comment: boolean,
  email: boolean,
  name: boolean,
  rating: boolean,
  title: boolean,
  type: boolean,
  priority: boolean,
  phone: boolean,
  nps: boolean,

  // Required fields (add _required suffix)
  comment_required: boolean,
  email_required: boolean,
  name_required: boolean,
  // ... etc

  // Pre-fill
  feedback: {                                    // Pre-fill form
    comment?: string,
    rating?: number,
    email?: string,
    name?: string
  },
  user: {                                        // User context
    id: string,
    name: string,
    email: string,
    phone?: string,
    [key: string]: string | null | undefined    // Custom fields
  },

  // Language
  language_override: string,
  translate: { [key: YbugTranslationKey]?: string }, // Custom translations
  translations: {                                // Multi-language
    [lang: string]: { [key: YbugTranslationKey]?: string }
  },

  // Appearance
  widget_position: 'center' | 'left' | 'right',  // Dialog position

  // Other
  skip_to: 'feedback',                           // Skip type selection
  close_countdown: number,                       // Auto-close timer
  shortcut: boolean,                             // Keyboard shortcut
  console_log: boolean,                          // Debug logging
  nonce: string,                                 // CSP nonce
  anonymize_elements: string,                    // CSS selectors to obfuscate
}
```

--------------------------------

### Ybug API Context Structure

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/integration-guide.md

Defines the structure of the object returned by the `useYbugApi()` hook, which includes the Ybug API instance and the `init` function for configuration.

```typescript
// What useYbugApi() returns
{
  Ybug: YbugApi | null,
  init: (settings: Partial<YbugSettings>) => void
}
```

--------------------------------

### YbugProvider with CSP Nonce

Source: https://github.com/avallete/ybug-react/blob/master/_autodocs/api-reference.md

Apply a CSP nonce to the script tag for enhanced security, especially in Content Security Policy environments. The nonce value is provided within the settings object.

```typescript
import { YbugProvider } from 'ybug-react';

function App() {
  return (
    <YbugProvider 
      ybugId="your-ybug-id"
      settings={{
        nonce: "abc123def456"
      }}
    >
      <YourAppContent />
    </YbugProvider>
  );
}
```