React Connect Web SDK

The React Connect Web SDK is a JavaScript library that allows you to easily integrate the Texture Connect flow into your react applications.

It works by opening a popup window that houses the Texture Connect flow and allows the user to authorize access to their devices. After a successful connection is established it then returns control back to your application along with a scoped key that can be used to make requests to the Texture API to retrieve data related to the newly connected account.

In the event that a popup window cannot be opened, the SDK will let you know via the onError handler so that you can fallback to redirecting the user directly to the hosted Texture Connect flow instead. In the event that this happens it would be recommended to provide a redirectUrl when creating the link session so that the user is redirected back to your application after a successful connection is established.

Installation

The React Connect Web SDK is available via yarn/npm.

npm

npm install @texturehq/react-connect-sdk

yarn

yarn add @texturehq/react-connect-sdk

Usage

Pre-requisites

You will first need to create a Connect Api key to pass into the SDK. This can be done via the Texture Dashboard.

Example

import { useCreateConnectSession } from "@texturehq/react-connect-sdk";

function App() {
  const { open } = useCreateConnectSession({
    connectApiKey: "<connect-api-key>",
    connectOptions: {
      referenceId: "<reference-id-from-your-system>",
      clientName: "Name for your application",
      redirectUrl: "https://your-application.com/redirect",
      tags: ["tag1", "tag2"],
      manufacturerFilters: { manufacturers: ["honeywell", "daikin"] },
      customerInfo: {
        email: "[email protected]",
        phone: "5555555555",
        firstName: "John",
        lastName: "Doe",
      },
    },
    onSuccess: (session) => {
      console.log(session);
    },
    onError: (error) => {
      console.log(error);
    },
  });

  return (
    <>
      <div className="card">
        <button onClick={() => open()}>Open Texture</button>
      </div>
    </>
  );
}

export default App;