quave:alert-react-tailwind

quave:alert-react-tailwind is a Meteor package that provides a plug-and-play alert system for React with TailwindCSS.

Why

It is designed to simplify the process of showing alerts to users inside the app.

We are using tailwindcss styles.

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:alert-react-tailwind

You should have the following npm dependencies in your project, the versions listed below are the tested versions:

• react@17.0.2
• react-dom@17.0.2
• react-router-dom@5.3.0
• @headlessui/react@1.4.3
• @heroicons/react@1.0.5

Usage

Configuration

You need to declare the context provider for the alerts, we recommend right after the Router from React Router, see AlertProvider in the example below:

1import React from 'react';
2import { BrowserRouter as Router } from 'react-router-dom';
3import { Routes } from './Routes';
4import { AlertProvider, Alert } from 'meteor/quave:alert-react-tailwind';
5
6export const App = () => (
7  <Router>
8    <AlertProvider>
9      <div className="bg-indigo-50 h-full">
10        <Alert />
11        <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-24 lg:px-8 lg:flex lg:items-center lg:justify-between">
12          <Routes />
13        </div>
14      </div>
15    </AlertProvider>
16  </Router>
17);

This alert is a small pop-over that will appear on top of the page. You need to render it somewhere in your app as well. See Alert in the example above. It is going to look like this:

Code usage

If you want to show an alert, you need to call openAlert, this function is produced by useAlert hook, see the example below:

1import React from 'react';
2import { useHistory } from 'react-router-dom';
3import { Passwordless } from 'meteor/quave:accounts-passwordless-react';
4import { useLoggedUser } from 'meteor/quave:logged-user-react';
5import { useAlert } from 'meteor/quave:alert-react-tailwind';
6
7import { RoutePaths } from '../general/RoutePaths';
8
9export const Access = () => {
10  const { openAlert } = useAlert();
11  const { loggedUser } = useLoggedUser();
12  const history = useHistory();
13
14  const onEnterToken = () => {
15    history.push(RoutePaths.HOME);
16    openAlert('Welcome!');
17  };
18
19  if (loggedUser) {
20    return (
21      <div className="flex flex-col items-center">
22        <h3 className="text-lg px-3 py-2 text-base font-medium">
23          You are already authenticated.
24        </h3>
25        <button onClick={() => history.push(RoutePaths.HOME)} type="button">
26          Go Home
27        </button>
28      </div>
29    );
30  }
31  return (
32    <div className="flex flex-col items-center flex-grow">
33      <Passwordless onEnterToken={onEnterToken} />
34      <a onClick={() => history.push(RoutePaths.HOME)} className="mt-5 text-base font-medium text-indigo-700 hover:text-indigo-600 cursor-pointer">
35        <span aria-hidden="true"> &rarr;</span> Back to Home
36      </a>
37    </div>
38  );
39};

We produce other utility functions as well, see AlertContext.Provider value in the code if you have more complex use cases. You can also submit PRs adding more examples to this readme.

Limitations

N/A

License

MIT