Skip to main content

Framework Integration

OpenKeyNav can be integrated into various JavaScript frameworks to enhance keyboard accessibility. This guide provides instructions for integrating OpenKeyNav with popular frameworks such as React, Angular, and Vue.js.

React Integration​

Step 1: Install OpenKeyNav​

Install OpenKeyNav using npm.

npm install openkeynav

Step 2: Initialize OpenKeyNav​

Initialize OpenKeyNav in your main React component, typically App.js or index.js.

To use in a React app, initiate in the main component (e.g., App or its equivalent):

For functional components:​

import { useEffect } from 'react';
import OpenKeyNav from 'openkeynav';

const App = () => {
    useEffect(() => {
        const openKeyNav = new OpenKeyNav();
        openKeyNav.init();
    }, []);

    // ...
};

export default App;

For class components:​

import React, { Component } from 'react';
import OpenKeyNav from 'openkeynav';

class App extends Component {
    componentDidMount() {
        const openKeyNav = new OpenKeyNav();
        openKeyNav.init();
    }

    // ...
}

export default App;

Angular Integration​

Step 1: Install OpenKeyNav​

Install OpenKeyNav using npm.

npm install openkeynav

Step 2: Initialize OpenKeyNav​

Initialize OpenKeyNav in your main Angular component, typically app.component.ts.

import { Component, OnInit } from '@angular/core';
import OpenKeyNav from 'openkeynav';

@Component({
    selector: 'app-root',
    template: `
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
    `,
    styles: []
})
export class AppComponent implements OnInit {
    ngOnInit() {
        const openKeyNav = new OpenKeyNav();
        openKeyNav.init();
    }
}

Vue.js Integration​

Step 1: Install OpenKeyNav​

Install OpenKeyNav using npm.

npm install openkeynav

Step 2: Initialize OpenKeyNav​

Initialize OpenKeyNav in your main Vue component, typically App.vue.

<template>
    <div id="app">
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
    </div>
</template>

<script>
import { onMounted } from 'vue';
import OpenKeyNav from 'openkeynav';

export default {
    name: 'App',
    setup() {
        onMounted(() => {
            const openKeyNav = new OpenKeyNav();
            openKeyNav.init();
        });
    }
};
</script>

Summary​

Integrating OpenKeyNav with your JavaScript framework involves installing the library and initializing it in your main component. This guide covered the basic steps for integrating OpenKeyNav with React, Angular, and Vue.js. By following these steps, you can enhance the keyboard accessibility of your framework-based application, providing a better user experience for all users.