> ## ⚠️ Deprecated

smms-fe-sdk

Feature

Provide a channel where the parent frame and iframe can communicate with each other.

1. Listen to SMMS's connection events (connecting, connected, connectionTimeout)
2. Pass token to SMMS
3. Listen to SMMS's location change
4. Use the same SDK when developing web applications for SMMS to load

SMMS's parent frame

Assuming SMMS is being served on http://localhost:4002

``typescript
import { SDKConsumer } from "@envision-digital/smms-fe-sdk";

function App() {
const frameRef = React.useRef(null);
const sdkRef = React.useRef();
const [status, setStatus] = React.useState(
ConnectionStatus.CONNECTING
);
const [currentLocation, setCurrentLocation] = React.useState();
React.useEffect(() => {
sdkRef.current = new SDKConsumer({
origin: "http://localhost:4002",
targetWindow: frameRef.current!.contentWindow!,
token: () => "this is a token from parent frame",
on: {
locationChange: (message) => {
setCurrentLocation(message.data.content as LocationObj);
},
},
lifecycleListener: setStatus,
connectionTimeoutIn: 5000,
});
return () => sdkRef.current?.destroy();
}, []);
return (


`typescript
import { SDKProvider } from "@envision-digital/smms-fe-sdk";

function App() {
const name = document.location.pathname.substring(1);
const sdkRef = React.useRef>();
const [ready, setReady] = React.useState(false);
const [receivedData, setReceivedData] = React.useState();
const [displayedToken, setDisplayedToken] = React.useState();
React.useEffect(() => {
sdkRef.current = new SDKProvider({
origin: "http://localhost:4002",
namespace: application-${name},
on: {
receiveToken: (message) => {
const token = message.data.content as string;
setDisplayedToken(token);
},
},
});
sdkRef.current.addEventListener(application-${name}-topic, (data) => {
setReceivedData(data.data.content);
});
sdkRef.current.initConnection().then((message) => {
const token = message.data.content?.token as string;
setDisplayedToken(token);
setReady(true);
});
return () => sdkRef.current?.destroy();
}, []);
return (