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

Getting started

Before using @getnuvo/pipelines-react, ensure you have signed up for nuvo 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

curl -X 'POST' \
  'https://api-gateway-staging.filedocks.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

{
  "access_token": ACCESS_TOKEN
}

This is just a simple example. Get more info here.

Installation

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

npm:

npm install @getnuvo/pipelines-react

yarn:

yarn add @getnuvo/pipelines-react

Basic example

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

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

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

export default App;

You can see a detailed example in our documentation here.

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:

<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 nuvo documentation.