react-strophe-hook v1.0.2

What is React-Strophe-hook

Strophe.js is a popular library to handle xmpp requests on browser. When the library is published jquery was the hot thing. So , it follows jquery approaches. This hook is a wrapper on top of strophe.js to make react implementation easier.

a working implementation can be found here

installation

npm i react-strophe-hook

or

yarn add react-strophe-hook

Basic Implementation

import React, { useEffect } from 'react';
import { Strophe } from 'strophe.js';
import { useStrophe } from 'react-strophe-hook';

const BOSH_SERVER = 'wss://boshServer.com';
const connection = new Strophe.Connection(BOSH_SERVER);
const credentials = {
  jabid: id@jabberDomain.com,
  pass: password,
};

function App() {
  const {
    connect,
    connected,
    disconnect,
    connecting,
    disconnecting,
    disconnected,
    domainName,
    resource,
    bareJid,
  } = useStrophe({
    credentials,
    connection,
    showLogs: true,
  });

  useEffect(() => {
    connect();
    return () => {
      disconnect('unmounted');
    };
  }, []);


  return (
    <div>
      {connecting && <p>Connecting...</p>}
      {disconnecting && <p>Disconnecting...</p>}
      <div>
        <p>The server is {connected ? 'connected' : 'disconnected'}</p>
      </div>

      <div>
        {connected && (
          <button type="button" onClick={() => disconnect('TESTING')}>
            Disconnect
          </button>
        )}
        {disconnected && (
          <button type="button" onClick={connect}>
            Connect
          </button>
        )}
      </div>
    </div>
  );
}

export default App;

Parameters

Return values