Integrations with wcagUI

Integrating wcagUI into your project is straightforward and flexible. Built as standard web components, wcagUI works seamlessly with a variety of frontend frameworks and modern build systems. This guide provides detailed technical instructions for integrating wcagUI across multiple environments, including specific examples for both the latest versions and the most commonly used legacy versions of Angular, React, and Vue, as well as examples for Svelte, Astro, and Qwik.

General Integration Concepts

wcagUI components are built on native web component standards. Key aspects include:

Angular Integration

Latest Angular (v15+ / Standalone Components)

Main Application Bootstrap (main.ts):

// main.ts (Latest Angular using Standalone Components)
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import '@wcag-ui/button';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

Standalone App Component (app.component.ts):

// app.component.ts (Latest Angular Standalone)
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<button is="wcag-button">Click Me</button>`,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {}

Legacy Angular (v8 – v9)

NgModule-Based Setup (app.module.ts):

// app.module.ts (Legacy Angular)
import '@wcag-ui/button';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule {}

Component Template (app.component.html):

<!-- app.component.html (Legacy Angular) -->
<button is="wcag-button">Click Me</button>

Note: If issues arise with custom elements not being recognized, ensure that the necessary polyfills for custom elements are included in your project.

React Integration (v16+)

This unified example works for React versions 16 and above.

// App.jsx (React v16+)
import React from 'react';
import ReactDOM from 'react-dom';
import '@wcag-ui/button';

function App() {
  return (
    <div>
      <button is="wcag-button">Click Me</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Technical Considerations:

Vue Integration

Latest Vue (Vue 3)

Importing and Configuring with createApp (main.js):

// main.js (Latest Vue)
import { createApp } from 'vue';
import App from './App.vue';
import '@wcag-ui/button';

const app = createApp(App);

// Configure Vue 3 to recognize custom elements
app.config.compilerOptions.isCustomElement = (tag) => tag === 'button' || tag.startsWith('wcag-');

app.mount('#app');

Component Template (App.vue):

<!-- App.vue (Latest Vue) -->
<template>
  <div>
    <button is="wcag-button">Click Me</button>
  </div>
</template>

Legacy Vue (Vue 2)

Importing and Configuring with Vue Instance (main.js):

// main.js (Legacy Vue)
import Vue from 'vue';
import App from './App.vue';
import '@wcag-ui/button';

// Configure Vue 2 to ignore custom elements
Vue.config.ignoredElements = ['button', /^wcag-/];

new Vue({
  render: h => h(App),
}).$mount('#app');

Component Template (App.vue):

<!-- App.vue (Legacy Vue) -->
<template>
  <div>
    <button is="wcag-button">Click Me</button>
  </div>
</template>

Technical Tip: Vue 2 uses ignoredElements to prevent warnings about unknown elements, while Vue 3 uses compilerOptions.isCustomElement for custom element recognition.

Svelte Integration

Svelte makes it simple to integrate wcagUI components. Just import the component in your Svelte file:

<!-- App.svelte -->
<script>
  import '@wcag-ui/button';
</script>

<main>
  <button is="wcag-button">Click Me</button>
</main>

Astro Integration

Astro supports both static and dynamic content. To integrate wcagUI, import the component at the top of your Astro file:

---
// Navbar.astro
import '@wcag-ui/button';
---
<html>
  <body>
    <button is="wcag-button">Click Me</button>
  </body>
</html>

Qwik Integration

Qwik, known for its resumability, supports web components effortlessly. Here’s an example of integrating wcagUI in a Qwik component:

// src/components/App.tsx (Qwik)
import { component$ } from '@builder.io/qwik';
import '@wcag-ui/button';

export const App = component$(() => {
  return (
    <div>
      <button is="wcag-button">Click Me</button>
    </div>
  );
});

And in your entry point:

// src/entry.tsx (Qwik)
import { render } from '@builder.io/qwik';
import { App } from './components/App';

render(document.getElementById('root')!, <App />);

Additional Technical Considerations

By following these detailed guidelines, wcagUI can be integrated into virtually any project environment. This versatile toolkit is engineered for modern frontend frameworks and build systems, enabling the creation of accessible, efficient, and future-proof digital experiences.

Return to Home →