Skip to main content

Plasma FHIR React Components

This package is a set of React components for displaying FHIR resources. The components bind directly to FHIR resources.

Out of the box, components are not styled. The styles can and should be customized using CSS. The components are merely to provide logic and structure to components. It is up to you (the developer) to style them in a way that matches your application.

Purpose​

The purpose of these components is

  • To get your application up-and-running sooner by providing a way to display and work with FHIR data immediately
  • Avoid spending time dealing with all the different variations of FHIR resources

Demo (Storybook)​

Check out our Storybook project to see a demo of each component.

https://react-components.plasmahealth.net

Installation​

To install the Plasma FHIR Client into your project

npm install @plasmahealth/plasma-fhir-react-components --save

Usage​

Import the components and use them in your application. They should take a FHIR resource as a prop.

import { FHIRr4 } from "@plasmahealth/plasma-fhir-react-components";

export function MyComponent(props: any) {
    return (
        <FHIRr4.AllergyIntoleranceView allergyIntolerance={...} />
    );
}

Styling​

  • Each component has a unique CSS class name(s). You can specify the styles for these classes in your own custom CSS file.
  • If you are using SASS along with another CSS library, you can use the @apply operator to add classes directly
  • Use "Inspect Element" in the browser to determine the class names of each component.
.CodingSelector {
    @apply capitalize;
}