fhir-react
Version:
React component library for displaying FHIR Resources
161 lines (121 loc) • 7.29 kB
Markdown
[](https://circleci.com/gh/1uphealth/fhir-react/tree/master)
[](http://storybook-fhir-react-lib.s3-website-us-east-1.amazonaws.com/)
# fhir-react
A React component library for displaying [FHIR](https://1up.health/dev/doc/introduction-to-fhir) data.
## Installation
```
npm install --save fhir-react
```
## Usage
This package has two exports: a `FhirResource` React component and `fhirVersions` object.
```js
import { FhirResource, fhirVersions } from 'fhir-react';
```
Render the component providing the FHIR data as a JavaScript object:
```jsx
const MyComponent = () => {
const fhirResource = JSON.parse(fhirResourceAsJsonString);
return (
<FhirResource
fhirResource={fhirResource}
fhirVersion={fhirVersions.R4}
withCarinBBProfile
/>
);
};
```
### `FhirResource` component props
| Prop | Type | Default | Description |
| -------------------- | ---------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fhirResource`\* | Object | - | The FHIR resource to be rendered |
| `fhirVersion`\* | `fhirVersions.DSTU2`, `fhirVersions.STU3, fhirVersions.R4` | - | FHIR resource version |
| `withCarinBBProfile` | Boolean | `false` | Use Carin BB profile extension on top of the HL7 default FHIR specification https://build.fhir.org/ig/HL7/carin-bb/index.html |
| `withDaVinciPDex` | Boolean | `false` | Use DaVinci Payer Data Exchange (PDex) profile extension on top of the HL7 default FHIR specification https://hl7.org/fhir/us/davinci-drug-formulary/index.html |
| `thorough` | Boolean | `false` | If this is set to `true`, or if it is absent, all array items and supported attributes will be displayed. Otherwise if this is `false` then only the first or otherwise important items will be displayed |
\* required props
### Available `fhirVersions`
- `fhirVersions.DSTU2` - http://hl7.org/fhir/dstu2/index.html
- `fhirVersions.STU3` - http://hl7.org/fhir/stu3/index.html
- `fhirVersions.R4` - http://hl7.org/fhir/r4/
### Available resources
| Resource | DSTU2 | STU3 | R4 | Carin BB Profile | DaVinci PDex |
| -------------------------- | :---: | :---: | :---: | :--------------: | ------------ |
| `AdverseEvent` | _N/A_ | ✅ | ✅ |
| `AllergyIntolerance` | ✅ | ✅ | ✅ |
| `AdverseEvent` | _N/A_ | ✅ | ✅ |
| `AllergyIntolerance` | ✅ | ✅ | ✅ |
| `Appointment` | ✅ | ✅ | ✅ |
| `Bundle` | ✅ | ✅ | ✅ |
| `CarePlan` | ✅ | ✅ | ✅ |
| `CareTeam` | _N/A_ | ✅ | ✅ |
| `Claim` | ✅ | ✅ | ✅ |
| `ClaimResponse` | ✅ | ✅ | ✅ |
| `Condition` | ✅ | ✅ | ✅ |
| `Coverage` | ✅ | ✅ | ✅ |
| `Device` | ✅ | ✅ | ✅ |
| `DiagnosticReport` | ✅ | ✅ | ✅ |
| `DocumentReference` | ✅ | ✅ | ✅ |
| `Encounter` | ✅ | ✅ | ✅ |
| `ExplanationOfBenefit` | ✅ | ✅ | ✅ | ✅ |
| `Goal` | ✅ | ✅ | ✅ |
| `Immunization` | ✅ | ✅ | ✅ |
| `List` | ✅ | ✅ | ✅ | | ✅ |
| `Location` | ✅ | ✅ | ✅ |
| `Medication` | ✅ | ✅ | ✅ |
| `MedicationAdministration` | ✅ | ✅ | ✅ |
| `MedicationDispense` | ✅ | ✅ | ✅ |
| `MedicationKnowledge` | _N/A_ | _N/A_ | ✅ | | ✅ |
| `MedicationRequest` | _N/A_ | ✅ | ✅ |
| `MedicationStatement` | ✅ | ✅ | ✅ |
| `Observation` | ✅ | ✅ | ✅ |
| `Organization` | ✅ | ✅ | ✅ |
| `Patient` | ✅ | ✅ | ✅ |
| `Practitioner` | ✅ | ✅ | ✅ |
| `PractitionerRole` | _N/A_ | ✅ | ✅ |
| `Procedure` | ✅ | ✅ | ✅ |
| `Questionnaire` | ✅ | ✅ | ✅ |
| `QuestionnaireResponse` | ✅ | ✅ | ✅ |
| `ReferralRequest` | ✅ | ✅ | _N/A_ |
| `ResearchStudy` | _N/A_ | ✅ | ✅ |
### Styles
Optional CSS styles are provided with this library. They are split into two files:
- `style.css` with basic styling of the components
- `bootstrap-reboot.min.css` further enhancing those styles
To use provided styles include them in the React component:
```js
import 'fhir-react/build/style.css';
import 'fhir-react/build/bootstrap-reboot.min.css';
```
The working demo example with styles included can be viewed [here](https://codesandbox.io/s/infallible-diffie-r6ln5).
## Storybook
Run storybook local server with:
```
npm run storybook
```
Now you can check how a component graphically presents information based on raw data at http://localhost:63653 .
There's also an online version available at http://storybook-fhir-react-lib.s3-website-us-east-1.amazonaws.com .
## Development
1. run `npm link` in this folder to create the npm package locally
1. in the folder where you are using the package (some other project) run `npm link fhir-react`
1. in that other project import this package as you would normally with `import FhirReact from 'fhir-react'`
1. Finally, in this fhir-react folder run the watch command via `npm start` and start developing.
### Test
```
npm run test
```
### Lint
```
npm run lint
npm run stylelint
```
### Build
```
npm run build
```
### Publish to NPM Registry
```
npm publish
```
### Storybook for the changes
When creating a new PR, changes will be available in the storybook at: <br>
http://storybook-fhir-react-lib.s3-website-us-east-1.amazonaws.com/dev/{branch-name}/