@gettrx/core-components

Gettrx core components is a UI component library containing components and style guides for all Gettrx Projects.

These components are designed to be used in traditional frontend view libraries/frameworks (such as Stencil, React, Angular, or Vue), or on their own through traditional JavaScript in the browser.

Features

• Tiny, highly optimized components built with Stencil
• No build or compiling required
• Simply add the static files to any project
• Lazy-loaded components without configuration

Components

The package consists of following components:

• gtr-button

How to use

Vanilla HTML

Easiest way to start using the components is by adding a script tag to the CDN:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@gettrx/core-components/dist/core-components/core-components.esm.js"
></script>
<script
  nomodule
  src="https://cdn.jsdelivr.net/npm/@gettrx/core-components/dist/core-components/core-components.js"
></script>

Any Gettrx core component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as document.createElement('gtr-button').

Additionally, within this package is a dist/core-components.js file and accompanying dist/core-components/ directory. These are the same files which are used by the CDN, and they're available in this package so they can be apart of an app's local development.

Framework Bindings

The @gettrx/core-components package can be used in simple HTML, or by vanilla JavaScript without any framework at all.

The components can be used with any framework by importing and running the loader before the components are used, and then use them as regular HTML elements:

// main.js/ts
import { defineCustomElements } from "@gettrx/core-components/loader";

defineCustomElements();

// Initialize the application

// some-component.js/ts
render() {
  return (
    <div>
      <gtr-button>Button</gtr-button>
    </div>
  );
}