### Installing Unified.to React Directory Component with NPM

Source: https://github.com/unified-to/unified-react-integrations-directory/blob/main/README.md

This command installs the `@unified-api/react-directory` package using npm, making the component available for use in a React project. It is a prerequisite for importing and utilizing the Unified Directory component.

```bash
$ npm install @unified-api/react-directory
```

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

### Installing Unified.to React Directory Component with Yarn

Source: https://github.com/unified-to/unified-react-integrations-directory/blob/main/README.md

This command installs the `@unified-api/react-directory` package using yarn, providing an alternative to npm for adding the component to a React project. It serves the same purpose as the npm install command.

```bash
$ yarn add @unified-api/react-directory
```

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

### Importing Unified.to React Directory Component in TypeScript

Source: https://github.com/unified-to/unified-react-integrations-directory/blob/main/README.md

This import statement makes the `UnifiedDirectory` component available for use in a TypeScript or JavaScript file after it has been installed. It allows developers to reference and render the component within their React application.

```ts
import UnifiedDirectory from '@unified-api/react-directory';
```

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

### Unified.to React Directory Component Props Interface

Source: https://github.com/unified-to/unified-react-integrations-directory/blob/main/README.md

This TypeScript interface defines the available props for the `UnifiedDirectory` component, allowing for extensive customization of its behavior and appearance. Key props include `workspaceId` (required), `categories` for filtering, `success_redirect` and `failure_redirect` for OAuth flow control, and `scopes` for permission requests. These props enable developers to tailor the integration directory to their specific application needs.

```ts
{
    workspaceId: string;    // your workspace_id found at https://app.unified.to/settings/api
    categories?: string[];  // An array of integration categories to limit the list of integrations (crm, ats, hr, uc,. ticketing, martech)
    external_xref?: string; // Your ID for the account/user that is signed into your application
    state?: string;         // A state string that will be sent back to your success URL
    scopes?: string[];      // An array of Unified.to permission scopes to request from OAUTH2-based integrations found at https://unified.to/apidocs#unified_object_connection
    success_redirect?: string;  // The URL where you want the user to be redirect to after a successful authentication. The Integration ID will be appended with (id=) to this URL, as will the state provided
    failure_redirect?: string;  // The URL where you want the user to be redirect to after an unsuccessful or aborted authorization.  An 'error' variable will be appended.
    nostyle?: boolean;
    environment?: string;   // The development environment (Eg. Production, Sandbox, ...)
    lang?: string;          // The language for the API Key authorization page.  (en, fr, es, it, pt, hi, zh)
    notabs?: boolean;       // Do not display tabs in the embedded directory
    nocategories?: boolean; // Do not display category badges for each integration
    dc?: 'us'|'eu';         // data-region


}
```

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

### Rendering Unified.to React Directory Component in JSX

Source: https://github.com/unified-to/unified-react-integrations-directory/blob/main/README.md

This JSX snippet demonstrates how to render the `UnifiedDirectory` component within a React application. It requires a `workspaceId` prop, which is essential for identifying the user's Unified.to workspace and displaying the correct integrations. The component is typically embedded within a React functional or class component's render method.

```js
return (
    <>
        <h1>Integrations Directory</h1>
        <UnifiedDirectory workspaceId="12345" />
    </>
);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.