Handling HTML Content in BriteAPI Responses

Overview

BriteAPI DrugInfo provides richly formatted data, including fields like description and clinicalDescription, in HTML format. This formatting is ideal for applications that display content in a web browser, as it allows for a rich presentation including styles and images. However, some applications may require data in a plain text format, devoid of any HTML markup. To accommodate this need, we provide guidelines and a utility function for stripping HTML from response data.

Rendering HTML Content

To render HTML content from BriteAPI responses, you can use the dangerouslySetInnerHTML attribute. This attribute allows you to render HTML content as-is, including any styles it contains. Here's an example of rendering HTML content using React:

import React from "react";

const DrugDetailsPage = ({ drugDetails }) => {
  const renderDescriptionWithStyles = (description) => {
    return { __html: description };
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-semibold mb-4">Drug Details</h1>
      {drugDetails ? (
        <div className="bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-semibold mb-2">Trade Name:</h2>
          <p className="text-gray-800">{drugDetails.tradeName}</p>

          <h2 className="text-xl font-semibold mb-2">Generic Name:</h2>
          <p className="text-gray-800">{drugDetails.genericName}</p>

          <h2 className="text-xl font-semibold mb-2">Description:</h2>
          <div
            className="text-gray-800"
            dangerouslySetInnerHTML={renderDescriptionWithStyles(
              drugDetails.description
            )}
          ></div>

          {/* Add more drug details here */}
        </div>
      ) : (
        <p className="text-red-500">Drug details not found.</p>
      )}
    </div>
  );
};

export default DrugDetailsPage;

In this code, we define a renderDescriptionWithStyles function that sets the HTML content with styles using the dangerouslySetInnerHTML attribute. This allows you to render HTML content as intended.

Best Practices and Security Considerations

• Security: When rendering HTML content, consider the security implications, especially if the text will be re-rendered in a web environment. Ensure to escape or encode the text to prevent Cross-Site Scripting (XSS) vulnerabilities.
• Data Integrity: Ensure that the HTML rendering process does not inadvertently alter the informational content of the data.
• Performance: Consider the performance implications if you're rendering large volumes of data. The dangerouslySetInnerHTML attribute is suitable for moderate-sized strings.

Rendering HTML content using the dangerouslySetInnerHTML attribute offers a straightforward solution for displaying HTML content from the BriteAPI DrugInfo. This functionality ensures greater flexibility and broader application compatibility for users of the API.

Why Strip HTML?

In certain scenarios, such as rendering text in a non-HTML environment or processing text data for analysis, you might prefer to have these fields in plain text. Stripping HTML is also useful to ensure compatibility with systems that do not support HTML rendering or where HTML could introduce security vulnerabilities.

Utility Function: stripServerHtml

To help users handle HTML content efficiently, you can create a utility function stripServerHtml. This function is designed to remove all HTML tags from a string, leaving plain text.

Function Definition

/**
 * Strips HTML tags from a given string.
 * @param {string} html - The string containing HTML.
 * @returns {string} - String with HTML tags removed.
 */
export function stripServerHtml(html) {
  if (!html || typeof html !== "string") {
    return "";
  }
  return html.replace(/<[^>]*>?/gm, "");
}

Usage Example

Here’s how you can use stripServerHtml in a typical scenario:

import { stripServerHtml } from "path/to/utility";

// Assume drug is an object from the BriteAPI response
const drug = {
  description: "<p>Description with <strong>HTML</strong> tags.</p>",
  clinicalDescription: "<p>Clinical info with <em>HTML</em> tags.</p>",
};

// Sanitize the HTML content
const sanitizedDrug = {
  ...drug,
  description: stripServerHtml(drug.description),
  clinicalDescription: stripServerHtml(drug.clinicalDescription),
};

console.log(sanitizedDrug);

Best Practices and Security Considerations

• Security: When stripping HTML, consider the security implications, especially if the text will be re-rendered in a web environment. Ensure to escape or encode the text to prevent Cross-Site Scripting (XSS) vulnerabilities.
• Data Integrity: Ensure that the HTML stripping process does not inadvertently alter the informational content of the data.
• Performance: Consider the performance implications if you're processing large volumes of data. The stripServerHtml function is suitable for moderate-sized strings.

Conclusion

The stripServerHtml utility function offers a straightforward solution for converting HTML content from the BriteAPI DrugInfo into plain text. This functionality ensures greater flexibility and broader application compatibility for the users of the API.