import React from 'react'
import { SockJsProvider } from 'use-sockjs'

const App = () => {
  return (
    <SockJsProvider
        onError={(error: Frame | string) => {
        }}
    >
      {/* ... */}
    </SockJsProvider>
  )
}

export default App

import React from 'react'
import { useSockJs } from 'use-sockjs'
import { Client, Frame, Message, Subscription } from 'stompjs'

export const MyComponent: React.FunctionComponent = () => {
  const { connect, disconnect, subscribe } = useSockJs()

  const subscriptionRef = useRef<Subscription | null>(null)

  // connect websocket when init
  useEffect(() => {
    connect({
      url: 'http://localhost/ws',
      heartbeat: {
        incoming: 600000,
        outgoing: 600000
      },
      onConnected(client) {
        subscribe({
          destination: 'destination',
          onMessage: message => {
          },
          onSubscribed: (subscription) => {
            subscriptionRef.current = subscription
          }
        })
      }
    })

    return ()=>{
      if(subscriptionRef.current){
        unsubscribe(subscriptionRef.current)
      }
      disconnect()
    }
  }, [])

  return (
    <div></div>
  )
}