quave:logged-user-react

quave:logged-user-react is a Meteor package that provides a plug-and-play React hook to get the logged user.

Why

It is designed to simplify the process of getting the logged user using React hooks.

We believe we are not reinventing the wheel in this package but what we are doing is like putting together the wheels in the vehicle :).

Installation

meteor add quave:logged-user-react

Usage

Code usage

If you want to obtain the logged user in your React component the React hook useLoggedUser is provided, see the example below:

1import React from 'react';
2import { useHistory } from 'react-router-dom';
3import { useLoggedUser } from 'meteor/quave:logged-user-react';
4import { RoutePaths } from '../general/RoutePaths';
5
6export const Home = () => {
7  const history = useHistory();
8  const { loggedUser, isLoadingLoggedUser } = useLoggedUser();
9
10  return (
11    <>
12      <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 md:text-4xl">
13        <span className="block">Ready to use Meteor?</span>
14        <span className="block text-indigo-600">Template by quave</span>
15
16        <div>
17          <a
18            onClick={() =>
19              loggedUser ? Meteor.logout() : history.push(RoutePaths.ACCESS)
20            }
21            className={`text-base font-medium text-indigo-700 hover:text-indigo-600 cursor-pointer ${
22              isLoadingLoggedUser ? 'invisible' : ''
23            }`}
24          >
25            {loggedUser ? 'Log out' : 'Access'}
26            <span aria-hidden="true"> &rarr;</span>
27          </a>
28        </div>
29      </h2>
30
31      <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
32        <div className="inline-flex rounded-md shadow">
33          <a
34            target="_blank"
35            href="https://www.quave.dev"
36            className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
37          >
38            Visit quave.dev
39          </a>
40        </div>
41      </div>
42    </>
43  );
44};

In the example besides getting the logged user we are also getting isLoadingLoggedUser, it is helpful to avoid flashing elements while your page is loading. If you remove the class added when isLoadingLoggedUser is true you are going to see the Visite quave.dev button changing its position during the load of user data.

Limitations

N/A

License

MIT