open-index/open-npm huggingface dataset:
npm package: @synqly/connect-react-sdk
Description: The Synqly Connect React SDK provides convenient hooks for managing integrations using Synqly Connect.
Latest version: 0.4.0

# Synqly Connect React SDK

The Synqly Connect React SDK provides convenient hooks for managing
integrations using Synqly Connect.

To use this SDK you must have access to a Synqly organization. If you aren't
yet a Synqly customer and like to know more, please contact us to [schedule a
demo](https://synqly.com/demo/).

## Installation

Use your favorite package manager to install `@synqly/connect-react-sdk`:

```sh
npm install @synqly/connect-react-sdk
```

## Usage

The Synqly Connect React SDK consists of a single hook:

- `useIntegrationPoint`: high-level hook used to interface with Synqly
  Connect for managing integrations and providing utilities for embedding
  Synqly Connect into your application

> [!TIP]
> For examples on how to use this library in an application, please see: https://github.com/Synqly/examples/tree/main/connect

In order to use this hook, you will need to provide an organization access
token. More information about authentication is available in the [Synqly API
documentation](https://docs.synqly.com/reference/api-authentication).

### `useIntegrationPoint`

This high-level hook provides you with all relevant data for a given
integration, as well as functions to open a Connect session for your
end-users to manage their integrations.

To use this hook you must provide the `id` or `name` of an integration
point, as well as a `token` with relevant access.

> [!CAUTION]
> The `token` should be limited in scope as much as possible, so that it's
> appropriate for use in an end-user browser environment. To help with this,
> please review the [Token Exchange API](https://docs.synqly.com/reference/tokens_create_token).
> We recommend using the `connect-ui` permission set when working with
> Connect UI.

Example:

```jsx
function NotificationsIntegrationCard({ accountId, token }) {
  const integrationPoint = useIntegrationPoint('app-notifications', token, {
    account: accountId,
  })

  const {
    integrations: [integration],
    connect,
    disconnect,
    isLoading,
  } = integrationPoint

  const handleClick = useCallback(() => {
    return integration ? disconnect() : connect({ type: 'tab' })
  }, [connect, disconnect])

  return (
    <div className="integration-card">
      <h1>Application Notifications</h1>
      <p>
        Integrate with your favorite notifications provider to receive updates
        from our app!
      </p>
      <button type="button" disabled={isLoading} onClick={handleClick}>
        {integration ? 'Disconnect' : 'Connect'}
      </button>
    </div>
  )
}
```

> [!TIP]
> The hooks use smart data fetching and will by default revalidate the data
> as needed. The default settings can be overridden for greater control
> over the data fetching process.