hamang-component-manager v0.0.4

Component Manager

Google Analytics의 광고화면, 고객 상담 채팅, 리뷰목록등 외부 서비스를 내 서비스에 노출하기 위한 컴포넌트를 생성하고 관리

아이디어

Q: 현재 페이지와 최대한 무관하게 컴포넌트를 추가할 수 없을까? A: iFrame을 이용하여 컴포넌트를 추가한다. 독립적으로 페이지를 관리할 수 있고, 기존 페이지의 CSS의 영향을 받지 않는다.

예시

• 페이지 중간 광고
• 화면 오른쪽 하단에 뜨는 고객 상담 채팅
• 페이지 내에 추가되는 리뷰 목록
• 그외에 팝업, 배너등

주요 기능

• 컴포넌트 그리기
• 컴포넌트와 부모간 이벤트 전송

Installation

# with npm
npm install hamang-component-manager

# or with Yarn
yarn add hamang-component-manager

Usage

Manager

iFrame 컴포넌트를 렌더링하고 관리함

컴포넌트 그리기

import { Manager } from 'hamang-component-manager';

// unique id, src, target dom
const component = Manager.createComponent('id', 'https://test.com', '#domId', {
  options...
});

Send event to component

import { Manager } from "hamang-component-manager";

const component = Manager.createComponent(...);
// or
const component = Manager.getComponent("id");

// send event
component.sendEvent("event", { payload: value });

Handle event from component

import { Manager } from 'hamang-component-manager';

// global event
Manager.on('close', (id, payload) => {
  const component = Manager.getComponent(id);
  component?.destroy();
});

// specific component component
const component = Manager.getComponent(id);
component?.on('close', (id, payload) => {
  component.destroy();
});

Component

iFrame내에 불려진 컴포넌트에서 부모(Manager)와 통신하기 위한 모듈

Send event to manager

import { Component } from 'hamang-component-manager';

Component.sendEvent('event', { payload: value });

부모의 이벤트 받기

import { Component } from 'hamang-component-manager';

Component.on('change', (id, payload) => {});