fhir-ui

fhir-ui

fhir-ui React components are used in conjunction with the Material UI component library to display HL7 FHIR Resources using Google's Material Design specification.

Prerequisites

• React - Component Rendering
• Material-UI - User Interface
• Material-UI - Icons
• Material-UI - Pickers
• Moment.js
• Fast Healthcare Interoperatbility Resources
• Roboto Font

Installation

fhir-ui is available as an npm package.

npm install --save fhir-ui

or

yarn add fhir-ui

Theming

fhir-ui components require a theme to be provided. The quickest way to get up and running is by using the Material-UI ThemeProvider to inject the theme into your application context. Following that, you can to use any of the components as demonstrated in the documentation. Here is a quick example to get you started:

import React from 'react'
import ReactDOM from 'react-dom'
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
import { MuiPickersUtilsProvider } from '@material-ui/pickers'
import lightBlue from '@material-ui/core/colors/lightBlue'

import { PatientCard } from 'fhir-ui'

// Create a theme instance.
const theme = createMuiTheme({
  palette: {
    primary: {
      light: lightBlue[300],
      main: lightBlue[500],
      dark: lightBlue[900],
      contrastText: '#FFF',
    },
    secondary: {
      light: lightBlue[300],
      main: lightBlue[500],
      dark: lightBlue[900],
      contrastText: '#FFF',
    },
    background: {
      default: '#f9f9f9',
    },
  },
})

const App = () => (
  <ThemeProvider theme={theme}>
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <PatientCard patient={patient} />
    </MuiPickersUtilsProvider>
  </ThemeProvider>
)

ReactDOM.render(<App />, document.getElementById('app'))

Patient Table Example

import React from 'react'
import { PatientTable } from 'fhir-ui'

const MyFhirComponent = () => (
  <div>
    <PatientTable
      patients={patientList}
      onRowClick={patientId => console.log('Selected Patient ID: ', patientId)}
    />
    <hr />
    <PatientDetail
      patient={patient}
      patientId={patient.id}
      onDelete={patientId => console.log('Removed Patient ID: ', patientId)}
    />
  </div>
)

export default MyFhirComponent

Please refer to each component's CodeSandbox.io example for an example on how to use them.

CodeSandbox.io Examples

• PatientCard
• PatientTable
• PatientDetail
• PatientBanner
• ObservationTable
• ObservationDetail
• ConditionTable
• AllergyTable
• MedicationTable

License

This project is licensed under the terms of the MIT license

Changelog

[v0.6.3][2022-06-23]

• Fix allergy table re-render on allergies change
• Fix condition table re-render on conditions change
• Fix medication table re-render on medications change
• Fix observation table re-render on observations change
• Fix observation detail re-render on observation change
• Fix patient card re-render on patient change
• Fix patient banner re-render on patient change