Examples

---

Table of contents

• Browser/CDN ESM Example
• React/JSX Example

---

Browser/CDN ESM Example

The package may be consumed from a CDN or direct-hosting using a script tag with a type="module" attribute pointing to the root index.js file. The async attribute is recommended for better performance.

The index.js at the root of the package will auto-register all custom elements.

<script async type="module" src="./@remhealth/unity/index.js"></script>

<!-- Just once, anywhere -->
<bells-config hidden>
  <input name="clientId" type="hidden" value="qa-bells-unity" />
  <input name="accessToken" type="hidden" value="..." />
  <input name="accessTokenIssuer" type="hidden" value="..." />
</bells-config>

<!-- As many as you want: -->
<bells-editor>
  <div>
    <div>
      <textarea cols="50" placeholder="Write something..." rows="5">
        This is a test
      </textarea>
    </div>
  </div>
</bells-editor>

---

React/JSX Example

The package may be consumed within a JSX environment, such as a React app.

You must explicitly call defineCustomElements. Unlike the browser/cdn loader, importing the JS module does not auto-register the custom elements.

TypeScript

If using TypeScript, be sure to include a reference to @remhealth/unity/jsx module. This will ensure the custom JSX elements are recognized. The reference only needs to exist in one file within your project.

/// <reference types="@remhealth/unity/jsx" />

import { defineCustomElements } from "@remhealth/unity";

defineCustomElements();

export function App() {
  return (
    <>
      <bells-config hidden>
        <input name="clientId" type="hidden" value="qa-bells-unity" />
        <input name="accessToken" type="hidden" value="..." />
        <input name="accessTokenIssuer" type="hidden" value="..." />
      </bells-config>

      <bells-editor>
        <div>
          <div>
            <textarea
              cols={50}
              placeholder="Write something..."
              rows={5}
              defaultValue="This is a test"
            />
          </div>
        </div>
      </bells-editor>
    </>
  );
}