Data Type Displays

Introduction

FHIR Data Type components are the basic building blocks of the Commure FHIR-native component library. Each component distills the concept represented by a given data value into a single human-readable string. FHIR data types range from the very simple ("dateTime") to the very complex ("HumanName").

Component	Supported FHIR R4 Data Types
FhirHumanName	HumanName
FhirAddress	Address
FhirReference	Reference
FhirCodeableConcept	CodeableConcept
FhirCoding	Coding
FhirPeriod	Period
FhirQuantity	Quantity, Quantity Variations
FhirRange	Range
FhirString	string, code, uri, id, url, oid
FhirDateTime	dateTime, date, instant
FhirDecimal	decimal
FhirInteger	integer, positiveInt, unsignedInt
FhirTime	time
FhirBase64Binary	base64Binary
FhirMarkdown	markdown

Import data type components from the core component package:

import "@commure/components-core/lib/style.css"; // Once at the top of your application
import { FhirHumanName, FhirQuantity } from "@commure/components-core";

FhirHumanName

HumanName contains the name of a human with text, parts and usage information. The multiple given parts and family name combine to form a single name. Where a person has alternate names that may be used in place of each other (e.g. Nicknames, Aliases), these are different instances of HumanName.

Alex Gilmour
<FhirHumanName
  value={{
    use: "official",
    text: "Alex Gilmour",
    family: "Gilmour",
    given: ["Alex"]
  }}
/>
<FhirHumanName
  value={{
    use: "official",
    text: "Alex Gilmour",
    family: "Gilmour",
    given: ["Alex"]
  }}
/>
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
hidePrefixes	false	boolean	Whether prefixes (Ms, Mr, etc) should render or not.
hideSuffixes	false	boolean	Whether suffixes (Jr, Sr, etc) should render or not.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
nameAssemblyOrder	false	string	The order in which the name should be displayed, if "F" renders Family name first, else if "G" renders Given name first.
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
preferText	false	boolean	Should use 'Address.text' field if present.
value	false	HumanName	HumanName FHIR type in json format

FhirAddress

Address is an address expressed using postal conventions (as opposed to GPS or other location definition formats). This data type may be used to convey addresses for use in delivering mail as well as for visiting locations which might not be valid for mail delivery. There are a variety of postal address formats defined around the world.

Galapagosweg 91, Building A, Section C, Den Burg, 9105 PZ, NLD
<FhirAddress
  value={{
    use: "work",
    line: ["Galapagosweg 91, Building A", "Section C"],
    city: "Den Burg",
    postalCode: "9105 PZ",
    country: "NLD",
    period: { start: "2013-08-15", end: "2013-09-15" }
  }}
/>
<FhirAddress
  value={{
    use: "work",
    line: ["Galapagosweg 91, Building A", "Section C"],
    city: "Den Burg",
    postalCode: "9105 PZ",
    country: "NLD",
    period: { start: "2013-08-15", end: "2013-09-15" }
  }}
/>
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
delimiter	false	string	Character to use in between address fields.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
preferText	false	boolean	Whether to use 'Address.text' field if present.
value	false	Address	Patient Address resource in json format

FhirReference

Reference contains a reference to another FHIR resource. The Reference type contains at least one of a reference (literal reference), an identifier (logical reference), and a display (text description of target).

FhirReference is a "connected component." If the resolveReference option is enabled, the component will attempt to resolve the reference by making a request to the Commure FHIR API. If the reference is successfully resolved, the children or resolvedResourcePath prop is used to render the Resource.

<FhirReference
  value={{ reference: "Patient/f2831186-85c1-42af-aab8-61d7c715d57a" }}
  resolvedResourcePath="Patient.name.given"
  resolveReference
/>
<FhirReference
  value={{ reference: "Patient/f2831186-85c1-42af-aab8-61d7c715d57a" }}
  resolvedResourcePath="Patient.name.given"
  resolveReference
/>
Hide code

Do not resolve reference:
Patient/f2831186-85c1-42af-aab8-61d7c715d57a
Use children to render resolved reference:
Failed to resolve reference:
Edit code

API Reference

Prop Name	Required?	Type	Description
children	false	(resource: Resource) => React.ReactNode	Child function for rendering the resolved resource, if able to resolve. If 'resolveReference' set to false, this prop is ignored.
className	false	string	A space-delimited list of class names to pass along to the container element.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	(resource?: Resource) => void	Callback function to be called when container is clicked on.
resolveReference	false	boolean	Whether to try to resolve the reference. If enabled, component will try to look up the resource by the `reference` field. If the Resource is not found, falls back to rendering the `display` or `reference` value. If able to find the referenced Resource, the component will either use `children` or `resolvedResourcePath` prop to render the Resource.
resolvedResourcePath	false	string	FHIRPath used to extract a string from the referenced resource, if able to resolve. The first non-null element of the collection returned from the FHIRPath will be rendered. If no non-null elements are returned, the component will fall back to rendering the Reference.display or Reference.reference. If 'resolveReference' set to false, this prop is ignored.
useCache	false	boolean	Whether to cache the resolution request (eg "Patient/12345"). If set to true, subsequent renders and instances of this component will not make a network request, and so the data may be stale. The cache is cleared when the browser window is closed. If 'resolveReference' set to false, this prop is ignored.
value	false	Reference	Reference value

FhirCodeableConcept

CodeableConcept contains information about a concept as supplied by one or more referenced code systems. Code systems refer to the various terminologies and ontologies that are used in healthcare to encode concepts that could otherwise be misinterpreted without a referenceable definition.

In the following example, the term "NEG" may be used by a local code system to represent a test's failure to show a positive result for condition being tested. It is sent with the code for the same concept represented by a public ontology, SNOMED. Upon receiving this datatype, the CodeableConcept components are capable of displaying the appropriate value and can be configured to show fields from a specific system.

Negative
<FhirCodeableConcept
  value={{
    coding: [
      {
        system: "https://myapp.com/resultcodes",
        code: "NEG",
        display: "NEG"
      },
      {
        system: "http://snomed.info/sct",
        code: "260385009",
        display: "Negative"
      }
    ],
    text: "Negative"
  }}
/>
<FhirCodeableConcept
  value={{
    coding: [
      {
        system: "https://myapp.com/resultcodes",
        code: "NEG",
        display: "NEG"
      },
      {
        system: "http://snomed.info/sct",
        code: "260385009",
        display: "Negative"
      }
    ],
    text: "Negative"
  }}
/>
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
preferredSystem	false	string	If provided, favors the display of codings with a matching system.
value	false	CodeableConcept	CodeableConcept FHIR type in json format

FhirCoding

Coding contains a reference to a single concept defined by a code system. Encoded concepts are used in healthcare to standardize the representation of concepts that could otherwise be misinterpreted without a referenceable definition.

In the following example, the term "Negative", a test's failure to show a positive result for condition being tested, is represented in SNOMED public ontology by a coded string. This code can be displayed with the FhirCoding component to configurably include the coded string, display text, and system.

Negative
<FhirCoding
  value={{
    system: "http://snomed.info/sct",
    code: "260385009",
    display: "Negative"
  }}
/>
<FhirCoding
  value={{
    system: "http://snomed.info/sct",
    code: "260385009",
    display: "Negative"
  }}
/>
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
value	false	Coding	Coding FHIR type in json format

FhirPeriod

Period specifies a range of time defined by a start and end date/time. The context of use will specify whether the entire range applies (e.g. "the patient was an inpatient of the hospital for this time range") or one value from the period applies (e.g. "give to the patient between 2 and 4 pm on 24-Jun 2013").

If the start element is missing, the start of the period is not known. If the end element is missing, it means that the period is ongoing, or the start may be in the past, and the end date in the future, which means that period is expected/planned to end at the specified time

08/15/2010 - 09/15/2013
Aug 2010 - ongoing
unknown - 2013
<div>
  <FhirPeriod value={{ start: "2010-08-15", end: "2013-09-15" }} />
  <FhirPeriod value={{ start: "2010-08" }} />
  <FhirPeriod value={{ end: "2013" }} />
</div>
<div>
  <FhirPeriod value={{ start: "2010-08-15", end: "2013-09-15" }} />
  <FhirPeriod value={{ start: "2010-08" }} />
  <FhirPeriod value={{ end: "2013" }} />
</div>
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
format	false	string	The moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
value	false	Period	Period FHIR type in json format.

FhirQuantity

Quantity contains information about a measurable value, such as a patient's body temperature, white blood cell count, or the number of patients in a physician's census.

This component supports all Variations on Quantity: Distance, Age, Count, Duration, and SimpleQuantity.

<= 300 milligram
<FhirQuantity
  value={{
    system: "http://unitsofmeasure.org",
    code: "mg",
    unit: "milligram",
    value: 300,
    comparator: "<="
  }}
/>
<FhirQuantity
  value={{
    system: "http://unitsofmeasure.org",
    code: "mg",
    unit: "milligram",
    value: 300,
    comparator: "<="
  }}
/>
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	ClassName for container element.
inline	false	boolean	Whether the label should be rendered inline with the children.
noDataElement	false	React.ReactNode	Element to be rendered if there is no data.
onClick	false	Function	Callback function to be called when container is clicked on.
value	false	Quantity	Quantity FHIR type in json format.

FhirRange

300 - 600 milligram
<FhirRange
  value={{
    low: {
      system: "http://unitsofmeasure.org",
      code: "mg",
      unit: "milligram",
      value: 300
    },
    high: {
      system: "http://unitsofmeasure.org",
      code: "mg",
      unit: "milligram",
      value: 600
    }
  }}
/>
<FhirRange
  value={{
    low: {
      system: "http://unitsofmeasure.org",
      code: "mg",
      unit: "milligram",
      value: 300
    },
    high: {
      system: "http://unitsofmeasure.org",
      code: "mg",
      unit: "milligram",
      value: 600
    }
  }}
/>
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
unknown	false	string	String to render when one side of range is missing.
value	false	Range	Range FHIR type in json format.

FhirString

This is an example string
<FhirString value="This is an example string" />
<FhirString value="This is an example string" />
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	ClassName for container element.
inline	false	boolean	Whether the label should be rendered inline with the children.
noDataElement	false	React.ReactNode	Element to be rendered if there is no data.
onClick	false	Function	Callback function to be called when container is clicked on.
value	false	string	String value to be rendered.

FhirDateTime

06/08/2013 10:57:34
<FhirDateTime value="2013-06-08T10:57:34Z" />
<FhirDateTime value="2013-06-08T10:57:34Z" />
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
format	false	string	The moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
value	false	dateTime	DateTime value to be rendered.

FhirDecimal

54.901
<FhirDecimal value={54.901} />
<FhirDecimal value={54.901} />
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
decimalPlaces	false	number	Fixed number of decimal places to show.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
value	false	decimal	Decimal value to be rendered.

FhirInteger

25
<FhirInteger value={25} />
<FhirInteger value={25} />
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
format	false	string	How the integer should be formatted.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
value	false	integer	Integer value to be rendered.

FhirTime

9:57:34 am
<FhirTime value="09:57:34Z" />
<FhirTime value="09:57:34Z" />
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
format	false	string	The moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
value	false	time	FHIR time value.

FhirBase64Binary

<FhirBase64Binary
  value="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
  contentType="image/png"
  renderedHeight={15}
/>
<FhirBase64Binary
  value="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
  contentType="image/png"
  renderedHeight={15}
/>
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
contentType	false	string	Content type to specify the type of media (e.g. "image/png"). If `renderContent` set to false, this prop is ignored. If omitted, the component will render the base64 source in an iframe.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
renderContent	false	boolean	Whether to try to render the content specified by the binary string.
renderedHeight	false	number	Fixed height for rendered `img` or `iframe`. If `renderContent` set to false, this prop is ignored.
testIdAttribute	false	string	Test-id attribute to be applied to the container element.
value	false	string	base64Binary value

FhirMarkdown

<FhirMarkdown value={undefined} />
<FhirMarkdown value={undefined} />
Hide code

API Reference

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to the container element.
inline	false	boolean	Whether to render the element inline (span) or as a block (div).
noDataElement	false	React.ReactNode	Element to render if there is no meaningful data in the supplied 'value' prop.
onClick	false	Function	Callback function to be called when container is clicked on.
testIdAttribute	false	string	Test-id attribute to be applied to the container element.
value	false	string	Markdown value

Related Reading

FHIR Data Types