How to use html-react-parser - 10 common examples

//   description: (
  //     
  //   ),
  //   preview: Parser(MOST_TIME_CONSUMING_PREVIEW),
  //   controls: MostTimeConsumingTestCasesControls,
  // },
];

export const WIDGETS_STATIC_PREVIEWS = {
  [FLAKY_TEST_CASES_TABLE]: Parser(FLAKY_TEST_CASES_TABLE_PREVIEW),
  [LAUNCHES_TABLE]: Parser(LAUNCHES_TABLE_PREVIEW),
  [MOST_FAILED_TEST_CASES_TABLE]: Parser(MOST_FAILED_TEST_CASES_TABLE_PREVIEW),
  [PROJECT_ACTIVITY]: Parser(PROJECT_ACTIVITY_PREVIEW),
  [UNIQUE_BUGS_TABLE]: Parser(UNIQUE_BUGS_TABLE_PREVIEW),
  /*
  [PRODUCT_STATUS]: Parser(PRODUCT_STATUS_PREVIEW),
  */
  [MOST_POPULAR_PATTERNS]: Parser(MOST_POPULAR_PATTERNS_PREVIEW),
  [CUMULATIVE_TREND]: Parser(CUMULATIVE_TREND_PREVIEW),
  [COMPONENT_HEALTH_CHECK]: Parser(COMPONENT_HEALTH_CHECK_PREVIEW),
  // [MOST_TIME_CONSUMING]: Parser(MOST_TIME_CONSUMING_PREVIEW),
};

domNode,
        'attribs[data-gts-swapped-href]',
        null
      );

      // replaces local links with  element
      if (
        domNode.name === 'a' &&
        !wasLinkProcessed &&
        elementUrlNoProtocol.includes(wordPressUrlNoProtocol) &&
        !elementUrlNoProtocol.includes(uploadsUrlNoProtocol)
      ) {
        let url = urlParsed.path();
        return (
          
            {domToReact(domNode.children, parserOptions)}
          
        );
      }

      // cleans up internal processing attribute
      if (wasLinkProcessed) {
        delete domNode.attribs['data-gts-swapped-href'];
      }

      // data passed from sourceParser
      const fluidData =
        domNode.name === 'img' &&
        getByPath(domNode, 'attribs[data-gts-encfluid]', null);

      if (fluidData) {
        const fluidDataParsed = JSON.parse(fluidData);

<div>
          <button title="{intl.formatMessage(COMMON_LOCALE_KEYS.CONFIRM)}" aria-label="{intl.formatMessage(COMMON_LOCALE_KEYS.CONFIRM)}">
            {Parser(CircleCheckIcon)}
          </button>
          <button title="{intl.formatMessage(COMMON_LOCALE_KEYS.DELETE)}" aria-label="{intl.formatMessage(COMMON_LOCALE_KEYS.DELETE)}">
            {Parser(CircleCrossIcon)}
          </button>
        </div>
      
    );
  }
}

export const UploadedIcon = () =&gt; <div>{Parser(SuccessIcon)}</div>;

return (
      <div>
        <div>
          <div>{jobInfo.name}</div>
          <div>
            {Parser(isFullscreenMode ? FullscreenExitIcon : FullscreenIcon)}
          </div>
        </div>
        {isJobInfoAvailable ? (
          
            <div>
              
            </div>
            <div>
              <div>
                {Parser(CalendarIcon)}
                {this.getFormattedDate(jobInfo.start_time)}
              </div>
              <div>
                {Parser(TimeIcon)}
                {this.getVideoDuration()}
              </div>
              <div>{jobInfo.os}</div>
              <div>{jobInfo.browser}</div>
            </div>
          
        ) : (
          <div>
            
          </div>
        )}
      </div>

export const PageButtons = ({ activePage, pageCount, onChangePage }) => (
  <ul>
     onChangePage(1)}&gt;
      {Parser(FirstPageArrowIcon)}
    
     onChangePage(activePage - 1)}&gt;
      {Parser(PreviousPageArrowIcon)}
    
    
     onChangePage(activePage + 1)}&gt;
      {Parser(NextPageArrowIcon)}
    
     onChangePage(pageCount)}
    &gt;
      {Parser(LastPageArrowIcon)}
    
  </ul>
);
PageButtons.propTypes = {

(description, i) => (
                                                      
                                                          {typeof description ===
                                                          'string'
                                                              ? parse(
                                                                    description
                                                                )
                                                              : description}
                                                      
                                                  )
                                              )
                                            : typeof rowData.description ===
                                              'string'
                                            ? parse(rowData.description)
                                            : rowData.description}
                                    
                                    
                                        {typeof rowData.type === 'string'
                                            ? parse(rowData.type)
                                            : rowData.type}
                                    
                                    
                                        {rowData.default
                                            ? typeof rowData.default ===
                                              'string'
                                                ? parse(rowData.default)
                                                : rowData.default
                                            : '-'}

? activeAttributes.map((attr, i) => (
              <span>
                {isStatic ? (
                  attr.key
                ) : (
                  <span>
                    {attr.key}
                  </span>
                )}
                {': '}
                {attr.value}{' '}
                {i + 1 &lt; activeAttributes.length &amp;&amp; (
                  <i>{Parser(RightArrowIcon)}</i>
                )}
              </span>
            ))
          : attributes[0]}

),
    preview: Parser(MOST_FAILED_TEST_CASES_TABLE_PREVIEW),
    controls: MostFailedTestCasesTableControls,
  },
  {
    id: FAILED_CASES_TREND,
    title: formatMessage(widgetTypesMessages[FAILED_CASES_TREND]),
    description: (
      
    ),
    preview: Parser(FAILED_CASES_TREND_PREVIEW),
    controls: FailedCasesTrendControls,
  },
  {
    id: NON_PASSED_TEST_CASES_TREND,
    title: formatMessage(widgetTypesMessages[NON_PASSED_TEST_CASES_TREND]),
    description: (
      
    ),
    preview: Parser(NON_PASSED_TEST_CASES_TREND_PREVIEW),
    controls: NotPassedTestCasesTrendControls,
  },

eventInfo: eventsInfo.deleteBtn,
    };
    const cancelButton = {
      text: intl.formatMessage(COMMON_LOCALE_KEYS.CANCEL),
      eventInfo: eventsInfo.cancelBtn,
    };
    return (
      
        <p>
          {Parser(intl.formatMessage(messages.deleteWidgetText, { name: widget.name }))}
        </p>
      
    );
  }
}