npm package: @getnuvo/pipelines-react
Description: <!-- markdownlint-disable --> <h1 align="center">@getnuvo/pipelines-react</h1>
Latest version: 0.13.1

<!-- markdownlint-disable -->
<h1 align="center">@getnuvo/pipelines-react</h1>

<div align="center">

[![API status](https://img.shields.io/uptimerobot/ratio/m792354517-acd98c6100961072cc093759?color=2fa659&label=uptime)](https://dp.status.ingestro.com/)

The `@getnuvo/pipelines-react` package provides React components that integrate seamlessly with Ingestro pipeline APIs, allowing you to add a pipeline creation component to your React application easily.

</div>

## Getting started

Before using `@getnuvo/pipelines-react`, ensure you have signed up for [Ingestro](https://dashboard.getnuvo.com/) and have access to your license key.

Once you are signed up, you need to retrieve your access token, install the package via NPM or yarn, and implement the component into your React application.

---

### Get access token

#### cURL

```shell
curl -X 'POST' \
  'https://api-gateway-staging.ingestro.com/dp/api/v1/auth/access-token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "license_key": LICENSE_KEY,
  "auth": {
    "identifier": E-MAIL,
    "type": "USER"
  }
}' # Replace LICENSE_KEY with your actual license key & E-MAIL with your actual email
```

#### response

```js
{
  "access_token": ACCESS_TOKEN
}
```

This is just a simple example. Get more info [here](https://docs.ingestro.com/dp/authentication-api).

---

### Installation

You can install `@getnuvo/pipelines-react` using either `npm` or `yarn`:

npm:

```shell
npm install @getnuvo/pipelines-react
```

yarn:

```shell
yarn add @getnuvo/pipelines-react
```

---

### Basic example

Here’s a basic example of how to use the `CreatePipeline` component in a React application:

```tsx
import React from 'react';
import { CreatePipeline } from '@getnuvo/pipelines-react';
import '@getnuvo/pipelines-react/index.css';

function App() {
  return (
    <CreatePipeline
      accessToken="YOUR ACCESS TOKEN"
      onPipelineCreate={() => {
        console.log('Pipeline created');
      }}
    />
  );
}

export default App;
```

You can see a detailed example in our documentation [here](https://docs.ingestro.com/dp/createpipeline-embeddable).

### Settings & configuration options

The `CreatePipeline` component supports various configuration options for flexibility in pipeline creation. Here’s a detailed list of options you can pass as props:

```tsx
<CreatePipeline
  accessToken={string} // Required: Your access token
  templateId={string} // Optional: ID of the pipeline template you want to use
  configuration={{
    developerMode: boolean, // Optional: Enable developer mode (default: false)
    name: string, // Optional: Name of the pipeline
    tdmId: string, // Optional: ID of the TDM
    active: boolean, // Optional: Set pipeline as active (default: true)
    outputConnectorId: string, // Optional: ID of the output connector
    inputConnectorId: string, // Optional: ID of the input connector
    errorConfig: { error_threshold: number }, // Optional: Error configuration
    scheduleConfig: {
      // Optional: Scheduling configuration
      frequency: 'HOURLY' | 'DAILY' | 'WEEKLY' | 'MONTHLY',
      startsOn: Date,
      endsOn: Date,
      interval: number,
    },
  }}
  settings={{
    i18nOverrides: {}, // Optional: Override default (i18n) text keys
    language: 'en', // Optional: Language setting (default: "en")
    modal: boolean, // Optional: Display as a modal or inline (default: true)
    allowTdmCreation: boolean, // Optional: Allow TDM creation (default: false)
    allowInputConnectorCreation: boolean, // Optional: Allow input connector creation (default: false)
    allowOutputConnectorCreation: boolean, // Optional: Allow output connector creation (default: false)
  }}
  onPipelineCreate={({ data }) => {
    // Callback: Executed when a pipeline is successfully created
    // 'data' contains the created pipeline object
  }}
  onClose={() => {
    // Callback: Executed when the creation workflow is closed (e.g., via "Cancel" or "X" button)
  }}
  onConnectorCreate={({ reload, connectorType }) => {
    // Callback: Executed when a create connector button is clicked
    // 'reload': Call this function to refresh the list of connectors
    // 'connectorType': Either "INPUT" or "OUTPUT"
  }}
  onTdmCreate={({ reload }) => {
    // Callback: Executed when a create TDM button is clicked
    // 'reload': Call this function to refresh the list of TDMs
  }}
/>
```

For more detailed configuration options and usage guidelines, refer to the [Ingestro documentation](https://docs.ingestro.com/dp/start/).