Fhir React
FHIR React Component Library
Overview:
The fhir-react package is a React component library designed for displaying FHIR (Fast Healthcare Interoperability Resources) data. It offers a convenient way to render FHIR resources in a user-friendly manner. This library provides a FhirResource component and an fhirVersions object as its exports. The FhirResource component allows users to pass FHIR data as a JavaScript object and customize the display with optional header icons. Additionally, users have the ability to override default functionality and configure the component according to their needs.
Features:
- FhirResource Component: Renders the provided FHIR resource in a visually appealing format.
- Customizable Header Icons: Allows users to customize header icons in various ways, including passing a URL, an
<img>element, a React src from import, or a false value to display a placeholder. - Resource Icon Display: Displays the resource icon, if available, or a placeholder if not provided.
- Overriding Default Accordion Functionality: Users can override the default Accordion function by passing a custom function to the onClick variable.
- Assigning Accordion IDs: Users can assign a number to be added at the end of the Accordion ID. If no number is provided, the library uses the lodash uniqueId function by default.
- Props for FhirResource Component: The FhirResource component accepts several props, including fhirResource (the FHIR resource to be rendered), fhirVersion (the FHIR resource version), withCarinBBProfile (to use the Carin BB profile extension), withDaVinciPDex (to use the DaVinci Payer Data Exchange profile extension), and thorough (to determine if all array items and supported attributes should be displayed).
Summary:
The fhir-react package provides a React component library for displaying FHIR data. It offers features such as flexible customization options, resource icon display, and the ability to override default functionality. By using the FhirResource component and its props, users can easily render FHIR resources in their React applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.