Example on Plunker: https://plnkr.co/edit/YYdAIdKY2VW9UbF6GT0X
See also fhir-smartr-redux for modified implementation using Redux.
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><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>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>
)
}
}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'));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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent