react-mongo-realm v0.3.6

This project to start

This library allows you to use mongo-realm in a simple way

     npm i react-mongo-realm

Once it is installed use the initial Provider component

Example next.js app.tsx

export default function App({ Component, pageProps }: AppProps) {
  return (
    <RealmProvider clientId="example" appId="example">
      <Component {...pageProps} />
    </RealmProvider>
  );
}

The clientId is from google auth and appId from mongo atlas that it generates for you

Components

Button Login Google

How to use

import { ButtonLoginGoogle } from "react-mongo-realm";
export default function Home() {
  return (
    <>
      <ButtonLoginGoogle />
    </>
  );
}

The props that the button receives are defined by the @react-oauth/google library

Mongo realm

exports = async function (type, id, data) {
  // the funcions user are:
  // create user, if existe return user, if dont exit to create and return user
  // update update user data
  const userCollection = context.services
    .get("mongodb-atlas")
    .db("user")
    .collection("users");
  async function getUser() {
    return await userCollection.findOne({ email: id }, { _id: false });
  }
  if (type == "create") {
    const userExist = await getUser();
    if (userExist != null) {
      return userExist;
    }
    if (userExist == null) {
      await userCollection.insertOne(data);
      return await getUser();
    }
  }
  if (type == "update") {
    return await userCollection.findOneAndUpdate(
      { userId: id },
      { $set: data },
      { returnNewDocument: true }
    );
  }
};

Hooks

useApp

import { useApp } from "react-mongo-realm";
export default function Home() {
  const app = useApp();
  app.currentUser?.accessToken;
  return <></>;
}

useApp returns app which is all the settings that realm-web can have

useUser

import { useUser } from "react-mongo-realm";
export default function Home() {
  // remember that for this hook you have to have a database called user and a collection called users
  const { updateUser, user } = useUser();
  console.log(user.email); //example@gmial.com
  return (
    <button
      onClick={() => {
        updateUser({ suscrioption: "1" });
      }}
    ></button>
  );
}

useUser allows you to update the user data and also see the data saved in the cloud, updateuser receives an object with any configuration

useUserRealm

import { useUserRealm } from "react-mongo-realm";
export default function Home() {
  const { userRealm } = useUserRealm();
  userRealm.identities;
}

This hook is simple, it represents the app.currentUser

useCollection

import { useCollection } from "react-mongo-realm";
export default function Home() {
  const colection = useCollection("user", "users", "mongo-atlas");
  colection.findOne();
}

This hook receives 3 parameters, the first of: the base to which realm points, the second the collection and the third the cluster in which it is default= mongodb-atlas returns the mongodb collection

useSync

import { useSync } from "react-mongo-realm";
export default function Home() {
  const colection = useCollection("user", "users", "mongo-atlas");
  const find = () => colection.findOne();
  const data = useSync(colection, find);
  console.log(data);
}

This hook receives 2 parameters, the first is the collection of data and the second is the function that returns the data.

useFn

import { useFn } from "react-mongo-realm";
export default function Home() {
  const fn = useFn("nameFn", "12", "lusa");
  return (
    <>
      <ButtonLoginGoogle />
    </>
  );
}

Call function mongo realm

useCallFn

import { useCallFn, useFn } from "react-mongo-realm";
export default function Home() {
  const [data, call] = useFn("nameFn", "12", "lusa");
  const { status } = useCallFn(cal);
  return (
    <>
      <button onClick={logout}>Logout</button>
    </>
  );
}

This hooks require the function return call in useFn and return status that type is status:"pending","success","error"

useLogout

import { useLogout } from "react-mongo-realm";
export default function Home() {
  const { logout } = useLogout();
  return (
    <>
      <button onClick={logout}>Logout</button>
    </>
  );
}

useIsLogin

import { useIsLogin } from "react-mongo-realm";
export default function Home() {
  const { isLogin } = useIsLogin();
  const { logout } = useLogout();
  return (
    <>
      {isLogin ? (
        <button onClick={logout}>Logout</button>
      ) : (
        <ButtonLoginGoogle />
      )}
    </>
  );
}

Is login return boolean