React components

Our React component Elements are pre-built packages containing complete end-to-end user flows that can be retrieved and rendered within your own application's UI.

Installation

To install a Hero Element React component, run:

Copy

Copied

yarn install @herohealthsoftware/HERO-ELEMENT

Please note that all Hero Elements are private packages published on GitHub Packages. To install them, you will need to have the appropriate permissions and be logged in to your package manager. For more information, please refer to the article Working with the npm registry.If you believe you are experiencing permission issues, please contact Hero support for assistance.

Example usage

Copy

Copied

const App = () => {
  return (
    <HeroHealthMessageBuilder
      apiKey="YOUR_API_KEY"
      tenantId="YOUR_TENANT_ID"
    />
  );
};

Theme provider

You can customise the CSS of your React component within the limits of Hero Health's Theme Provider component.

Shadow DOM Encapsulation

Our components are designed with style encapsulation in mind using the Shadow DOM. This encapsulation ensures that all styles defined within the component are localized, preventing any potential conflicts with styles in the rest of your application.

Please contact Hero support for further information about how to implement your theme within a React Element.

List of Hero Health React component Elements

The following packages are currently available for use:

@herohealthsoftware/message-builder-react
@herohealthsoftware/booking-react
@herohealthsoftware/link-builder-react