plasma-fhir-react-components

• Set of React components for displaying FHIR resources.
  • Mostly R4, but there are a few DSTU2 components
• Components bind directly to FHIR resources.
• Styles can be customized using CSS.

Usage

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

import { FHIRr4 } from "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;
}

Testing/Development

Storybook

• yarn storybook
• yarn build-storybook

Unit Tests

• yarn test

Install/Update Locally

• In your app:
  • npm install --save ../../packages/plasma-fhir-react-components
• After making changes:
  • This package: yarn rollup
  • Your app: npm install --save ../../packages/plasma-fhir-react-components

Deployment

When deploying, please rollup and publish new version to NPM

Rollup

• yarn rollup

Publish/Deploy

• Increment version
• yarn rollup
• yarn storybook (make sure everything looks ok)
• npm publish

References:

• https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe