fhir-smartr
v1.1.37
Published
fhir-smartr React component
Readme
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-smartrMake 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.