fhir-smartr

SMART on FHIR Components for React

Example on Plunker: https://plnkr.co/edit/YYdAIdKY2VW9UbF6GT0X

See also fhir-smartr-redux for modified implementation using Redux.

Installation

Node

npm install --save fhir-smartr

Make sure to include a reference to the SMART on FHIR js library in your html so you have access to the API.

<script src="https://cdn.rawgit.com/smart-on-fhir/client-js/v0.1.8/dist/fhir-client.js"></script>

In the Browser (UMD)

<head>
  <!--Load dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdn.rawgit.com/smart-on-fhir/client-js/v0.1.8/dist/fhir-client.js"></script>
  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <!-- Load fhir-smartr -->
  <script type="text/javascript" src="https://unpkg.com/fhir-smartr/umd/fhir-smartr.min.js"></script>
</head>

Usage

Define a resource component with React

import { Component } from 'react' // var Component = React.Component; in browser

class PatientResource extends Component {
  
  render() {
    // FHIR resources will be passed in as props.resource
    const patient = this.props.resource;
    const name = patient.name[0];
    const address = patient.address[0];
    return(
      <div>
        <h2>{ name.given[0] + ' ' + name.family }</h2>
        <div>{ address.line[0] }</div>
      </div>
    )
  }
  
}

Read a FHIR resource

import React, { Component } from 'react' // var Component = React.Component; in browser
import { SmartRead } from 'fhir-smartr' // var SmartRead = FhirSmartr.SmartRead in browser

class App extends Component {
  render() {
    return (
      // SmartRead allows you to define a query
      // The results of that query are then passed to its children as props.resource
      <SmartRead query={{ type: 'Patient', id: '0c458610-3570-4103-9263-ab84fbff6f0c'}}>
        <PatientResource />
      </SmartRead>
    )
  }
}

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

Search for a FHIR Resource

import React, { Component } from 'react'
import { SmartSearch, ResourceList } from 'fhir-smartr' // FhirSmartr.SmartSearch and FhirSmartr.ResourceList in browser

class App extends Component {
  render() {
    return (
      // SmartSearch allows you to define a query
      // The results of that query are then passed to its children as props.results
      <SmartSearch query={{ type: 'Patient' }}>
        // ResourceList maps props.results to a list of its child components 
        <ResourceList>
          <PatientResource />
        </ResourceList>
      </SmartSearch>
    )
  }
}

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

Note: SmartRead and SmartSearch depend on FHIR.Oauth.Ready(). If you want to test against the open SMART DSTU Sandbox, use TestRead and TestSearch. These will use FHIR.Client() instead.

galileomd / fhir-smartr