iframe-interface

iframe-interface

iframe-interface helps you to register and call api between iframe. Support async.

English | 中文

GetStarted

yarn add iframe-interface

Basic Usage

iframe-interface separate api into 3 stage: factory => interface => call. Which is inherited from axios-interface (Another helpful api tool widely used by our team).

import {createFactory} from 'iframe-interface';

const {setIframe, createCall} = createFactory({side: 'host'});

const Component = () => <iframe src="https://example.com" ref={setIframe} />;

// define api
const getUsersFromIframe = createCall<Params, Result>('getUsers');

// call
const result = await getUsers({companyId: '1', keyword: 'jack'});

• guest side

import {useCallback, useEffect} from 'react';
import {createFactory} from 'iframe-interface';

const {registerCallHandler} = createFactory({side: 'guest'});

// register api at global
registerCallHandler('getUsers', handle);

// or register api at component
const Component = () => {
    const handle = useCallback(
        async (params: Params) => {
            const result = await something();
            return result;
        },
        [],
    )
    useEffect(
        () => {
            registerCallHandler('getUsers', handle);
        },
        [],
    );
    return null;
}

registerCallHandler at host side and createCall at guest side is also allowed. Put them at the opposite sides and it will work.

Further

Lifecycles like onResolve are not implemented yet since I think it may not be necessary. If you have some common issue and you want it be implemented in iframe-interface, please open an issue.