use-firebase-events v1.1.1

useFirebaseEvents

Designed to help you get up and running with an event like system connected through the marvellous Firebase

Install

npm i use-firebase-events

Usage

First, wrap your app with the <EventsProvider/>

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import { EventsProvider } from "use-firebase-events";
import App from "./App";

const firebaseConfig = {
  ...config from firebase
};

ReactDOM.render(
  <EventsProvider config={firebaseConfig}>
    <App />
  </EventsProvider>,
  document.getElementById("root")
);

App.tsx

import React, { useCallback, useEffect } from "react";
import { useSingleEvent } from "use-firebase-events";

const EVENTS = {
  TEST: "TEST"
};

function App() {
  const onEvent = useCallback(event => {
    console.log("event", event);
  }, []);

  const { unlisten, fire } = useSingleEvent({
    name: EVENTS.TEST,
    onEvent
  });

  useEffect(() => {
    return () => unlisten();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="App">
      <button onClick={() => fire({ foo: "bar" })}>Fire event</button>
    </div>
  );
}

export default App;

API

<EventsProvider/>

Required props are marked with *.

useFirebaseEvents()

Options (required *)

Returns

{
  on: (eventName: string, callback: ListenFunction) => UnlistenFunction,
  fire: (
    eventName: string,
    data: { [key: string]: any }
  ) => Promise<boolean>;
}

useFirebaseEvents()

Options (required *)

Returns

{
  unlisten: () => void,
  fireSingle: (
    data: { [key: string]: any }
  ) => Promise<boolean>;
}