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.

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-ui-react'

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-ui-react'

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-ui-react'

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

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