Page History
...
Code Block | ||
---|---|---|
| ||
interface Context { latestIncomminglatestIncoming: NAPMessage | null; latestError: NAPError | null; postMessage: (message: NAPMessage) => void; subscribe: (subscriber: NAPHostSubscriber) => void; unsubscribe: (subscriber: NAPHostSubscriber) => void; } |
...
Code Block | ||
---|---|---|
| ||
import { NapContextProvider, NAPEventType, useNap } from 'nap-react-sdk'; import React from 'react'; import { v4 as UUID } from 'uuid'; const IncommingMessageComponentIncomingMessageComponent: React.FC = () => { const napContext = useNap() return <div> {JSON.stringify(napContext.latestIncomminglatestIncoming)}</div> } const IncommingErrorsComponentIncomingErrorsComponent: React.FC = () => { const napContext = useNap() return ( <div > <p> Error received: {JSON.stringify(napContext.latestError)}</p> </div> ) } const PostMessageComponent: React.FC = () => { const napContext = useNap() return ( <button onClick={() => { napContext.postMessage({ date: new Date().toString(), id: UUID(), event: { type: NAPEventType.SessionOpen } }) }} > Send message </button> ) } const App = () => { return ( <> <NapContextProvider> <IncommingMessageComponent><<IncomingMessageComponent></IncommingMessageComponent>IncomingMessageComponent> <IncommingErrorsComponent><<IncomingErrorsComponent></IncommingErrorsComponent>IncomingErrorsComponent> <PostMessageComponent></PostMessageComponent> </NapContextProvider> </> ) } export default App |
...