React Compatibility

Significant White Space

Similar to vanilla <span> elements, inline elements defined in HelixUI may rely on significant white space surrounding the tag in the HTML markup.

Problem

JSX has been found to remove significant white space in certain scenarios (see demo below).

Demonstration of JSX Collapsing White Space

Solution

If you have encountered one of the scenarios demonstrated above, there are two strategies available to correct it.

  1. Rearrange your JSX markup so that it retains the needed white space.
  2. Add a literal white space text node ({' '}) where it is needed.