Skip to content

dancerphil/iframe-interface

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

iframe-interface

version npm downloads MIT License

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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published