fhir-react

    0.3.2 • Public • Published

    CircleCI Storybook

    fhir-react

    A React component library for displaying FHIR data.

    Installation

    npm install --save fhir-react
    

    Usage

    This package has two exports: a FhirResource React component and fhirVersions object.

    import { FhirResource, fhirVersions } from 'fhir-react';

    Render the component providing the FHIR data as a JavaScript object:

    const MyComponent = () => {
      const fhirResource = JSON.parse(fhirResourceAsJsonString);
      return (
        <FhirResource
          fhirResource={fhirResource}
          fhirVersion={fhirVersions.R4}
          fhirIcons={fhirIcons}
          withCarinBBProfile
        />
      );
    };

    Optionally custom header icons could be passed as fhirIcons props. The shape of the passed object should be as in example below with resource type as the key and image url or DOM node as the value:

    import React from 'react';
    
    export default {
      Condition: (
        <img
          src={require('./dstu2/resources/condition/condition.svg')}
          alt="header icon"
        />
      ),
      Immunization: (
        <img
          src={require('./dstu2/resources/immunization/immunization.svg')}
          alt="header icon"
        />
      ),
    };

    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

    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 update v0.3

    The 0.3 version of the FHIR React Component library introduces the bootstrap Accordion component as the base of each available resource which provides any data. The RWD support is provided for each component.

    All of the changes can be tracked by viewing the current version of the storybook.

    Available resources v0.3

    Resource DSTU2 STU3 R4 Carin BB Profile DaVinci PDex
    Appointment
    Condition
    Encounter
    ExplanationOfBenefit
    Immunization
    Observation
    Patient
    Practitioner
    Procedure

    The update does not change the datasets which components are able to handle. It means that user can display the same particulars as in the previous version of the specific component.

    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:

    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.

    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
    2. in the folder where you are using the package (some other project) run npm link fhir-react
    3. in that other project import this package as you would normally with import FhirReact from 'fhir-react'
    4. 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

    To publish, create a new release in GitHub.

    Storybook for the changes

    When creating a new PR, changes will be available in the storybook at:
    http://storybook-fhir-react-lib.s3-website-us-east-1.amazonaws.com/dev/{branch-name}/

    Install

    npm i fhir-react

    DownloadsWeekly Downloads

    1,114

    Version

    0.3.2

    License

    CC-BY-NC-SA-4.0

    Unpacked Size

    3.08 MB

    Total Files

    549

    Last publish

    Collaborators

    • tony1uphealth
    • beck1uphealth
    • 1uphealthadmin