quave:alert-react-tailwind

v1.0.3Published 2 years ago

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:

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
6// classnames tailwind alert:
7// fixed inset-0 flex items-end px-4 py-6 pointer-events-none z-10 sm:p-6 sm:items-start w-full flex-col items-center space-y-4 sm:items-end transform ease-out duration-300 transition translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2 translate-y-0 opacity-100 sm:translate-x-0 ease-in duration-100 max-w-sm bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden p-4 items-start flex-shrink-0 h-6 w-6 text-gray-400 text-red-500 text-green-500 ml-3 w-0 flex-1 pt-0.5 text-sm font-medium text-gray-900 mt-1 text-gray-500 mt-3 space-x-7 rounded-md text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-gray-700 hover:text-gray-500 ml-4 inline-flex sr-only h-5 w-5
8
9export const App = () => (
10  <Router>
11    <AlertProvider>
12      <div className="bg-indigo-50 h-full">
13        <Alert />
14        <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">
15          <Routes />
16        </div>
17      </div>
18    </AlertProvider>
19  </Router>
20);

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:

Notification Sample

Tailwind

By default we provide tailwindcss classes, you should include this comment somewhere in your code to avoid purging these classes:

1// classnames tailwind alert:
2// fixed inset-0 flex items-end px-4 py-6 pointer-events-none z-10 sm:p-6 sm:items-start w-full flex-col items-center space-y-4 sm:items-end transform ease-out duration-300 transition translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2 translate-y-0 opacity-100 sm:translate-x-0 ease-in duration-100 max-w-sm bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden p-4 items-start flex-shrink-0 h-6 w-6 text-gray-400 text-red-500 text-green-500 ml-3 w-0 flex-1 pt-0.5 text-sm font-medium text-gray-900 mt-1 text-gray-500 mt-3 space-x-7 rounded-md text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-gray-700 hover:text-gray-500 ml-4 inline-flex sr-only h-5 w-5

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
35        onClick={() => history.push(RoutePaths.HOME)}
36        className="mt-5 text-base font-medium text-indigo-700 hover:text-indigo-600 cursor-pointer"
37      >
38        <span aria-hidden="true"> &rarr;</span> Back to Home
39      </a>
40    </div>
41  );
42};

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.

Changes

If you want to keep your project up-to-date with the changes made here, read our CHANGELOG.

Limitations

N/A

License

MIT