@octavenz/reoako

Reoako Frontend

This is the frontend component for Reoako - the Te Reo Māori translation tooltip. To use this you will need a Reoako account and api key.

Getting Started

Install the dependency

> npm install @octavenz/reoako
> yarn add @octavenz/reoako

In your JS.

import Reoako from '@octavenz/reoako';

Reoako.init({
    apiKey: 'abc123',
    apiDomain: 'http://0.0.0.0:8113', // optional
    // debug: true, //  
    track: (type, detail) => {
        // optional. hook into your analytics when events occur
        if (typeof detail === 'string') {
            console.log(type, detail);
        } else if ('en' in detail) {
            console.log(type, `${detail.en} | ${detail.mi}`);
        }
    },
});

In your *css

@import '~@octavenz/reoako/dist/reoako.css';
//@import '../../node_modules/@octavenz/reoako/dist/reoako.css';
//@import '../../../reoako.ts/lib/reoako/index.scss';

If you want to override reoako-trigger styles you can do so easily border is specified as a box shadow to avoid effecting box-model

.theme--dark .reoako-trigger {
    box-shadow: inset 0 0 0 0.1em #e5e5e5;
    color: #e5e5e5;

    &:hover {
        background: #3A3A3A;
    }

    &:focus,
    &:active {
        background: #e5e5e5;
        color: #3A3A3A;
    }
}

In your html

<span data-reoako-id='kupu'>kupu</span>

IE 11 Support

To get Reoako working in IE11 you need to add the following polyfills.

import 'core-js/features/array/from';
import 'core-js/features/array/find';
import 'core-js/features/promise';
import 'core-js/features/string/starts-with';
import 'whatwg-fetch';