Page History
...
Da nap-react-sdk er en react specifik wrapper af broen, som initialiseres i nap-typescript-sdk, har den en peer dependency til nap-typescript-sdket. Et eksempel for implementing af nap-react-sdk til at vise og sende beskeder kunne se således ud:
| Code Block | ||
|---|---|---|
| ||
import { NapContextProvider, NAPEventType, useNap } from 'nap-react-sdk'; |
...
import React from 'react'; |
...
import { v4 as UUID } from 'uuid'; |
...
const IncommingMessageComponent: React.FC = () => { |
...
const napContext = useNap() |
...
return <div> {JSON.stringify( |
...
napContext.latestIncomming)}</ |
...
div> } const PostMessageComponent: React.FC = () => { |
...
const napContext = useNap() |
...
return |
...
( <button onClick={() => |
...
{ napContext.postMessage({ |
...
date: new Date().toString(), |
...
id: '123',
event: { type: NAPEventType.SessionOpen }
})
}}
>
Send message
</button>
)
}
const App = () => {
return (
<>
<NapContextProvider>
<IncommingMessageComponent></IncommingMessageComponent>
<PostMessageComponent></PostMessageComponent>
</NapContextProvider>
</>
)
}
export default Appp |