@octavenz/reorua v1.1.1

ReoRua Frontend

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

Getting Started

Install the dependency

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

In your JS.

import ReoRua from '@octavenz/reorua';

ReoRua.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/reorua/dist/reorua.css';
//@import '../../node_modules/@octavenz/reorua/dist/reorua.css';
//@import '../../../reorua.ts/lib/reorua/index.scss';

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

.theme--dark .reorua-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-reorua-id='kupu'>kupu</span>

IE 11 Support

To get Reorua 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';