Web UI NPM Package

The Tiro.health Web UI NPM package provides a set of components to integrate Tiro.health Capture into your web application.

Installing from Private Registry

The Tiro.health Web UI NPM package is hosted in our private Google Artifact Registry. After your service account has been granted access, configure npm to authenticate with the registry:

Configuration

  1. Set up authentication using one of these methods:

    Option A: Using npx (recommended for initial setup)

    npx google-artifactregistry-auth

    Option B: Manual configuration

    Add the following to your .npmrc file:

    @tiro-health:registry=https://europe-npm.pkg.dev/tiroapp-4cb17/npm-ext/
//europe-npm.pkg.dev/tiroapp-4cb17/npm-ext/:always-auth=true

  2. Install the package:

    npm install @tiro-health/web-sdk

For more details on configuring authentication, see the Google Cloud Artifact Registry documentation.

Components

The package includes multiple components. Each of them is built for multiple frontend frameworks:

  • Form Filler component allows users to fill out forms and submit them to the Tiro.health backend.
  • Narrative component generates narrative text based on a QuestionnaireResponse.
  • Validation Feedback component displays validation errors and warnings for a QuestionnaireResponse.

Form Filler

The Form Filler component is the main component of the Tiro.health Web UI NPM package. It provides a user interface for filling out forms and submitting them to the Tiro.health backend. The Form Filler component is built on top of the SDC standard and supports all features of the SDC standard, including:

import { FormFiller, SDCClient } from '@tiro-health/web-sdk'

const client = new SDCClient({
  baseUrl: 'https://your-sdc-backend-address',
  // other configuration options
})

<FormFiller
  client={client}
  questionnaire={questionnaire}
  initialResponse={questionnaireResponse}
  onSubmit={handleSubmit}
  onChange={handleChange}
  onError={handleError}
/>

Narrative

The Narrative component is used to generate narrative text based on a QuestionnaireResponse. It can be used to display the narrative text in the Form Filler component or in other parts of your application.

import { Narrative } from '@tiro-health/web-sdk'

const client = new SDCClient({
  baseUrl: 'https://your-sdc-backend-address',
})

<Narrative client={client} questionnaire={questionnaire} />

Validation Feedback

The Validation Feedback component is used to display validation errors and warnings for a QuestionnaireResponse. It can be used to provide feedback to the user while they are filling out the form.

import { ValidationFeedback } from '@tiro-health/web-sdk'

const client = new SDCClient({
  baseUrl: 'https://your-sdc-backend-address',
})

<ValidationFeedback client={client} questionnaire={questionnaire} />

Was this page helpful?