@wingscommerce/app-bridge-react
v0.1.1
Published
React wrappers for the Wings Commerce App Bridge library
Readme
@wingscommerce/app-bridge-react
WingsCommerce App Bridge
스크립트의 React 래퍼입니다. 스크립트 자체는 npm이 아니라 CDN으로 배포되며,
이 패키지는 그 전역(window.wingscommerce)을 React에서 안전하게 쓰는 얇은 층입니다.
사용
앱 문서의 <head>에 App Bridge 스크립트가 먼저 있어야 합니다:
<script src="https://cdn.wingscommerce.com/app-bridge/wingscommerce.js"></script>import { useAppBridge } from "@wingscommerce/app-bridge-react";
function ProductList() {
const wingscommerce = useAppBridge();
async function loadProducts() {
const token = await wingscommerce.idToken();
await fetch("/api/products", {
headers: { Authorization: `Bearer ${token}` },
});
}
return <button onClick={loadProducts}>Load products</button>;
}- 서버(SSR)에서: 호출 자체는 안전하고, 속성에 접근하는 순간 "Effect로 옮기라"는 에러를 던집니다
- 스크립트 미로드: 원인(스크립트 태그 누락)을 짚는 에러를 던집니다
- 타입은
@wingscommerce/app-bridge-types를 그대로 re-export 합니다 — import만 해도window.wingscommerce전역 타입이 잡힙니다 - TypeScript 소비자는 5.0 이상이 필요합니다 (
export type *구문 사용)