{"id":19714708,"url":"https://github.com/quavedev/alert-react-tailwind","last_synced_at":"2025-04-29T19:33:07.975Z","repository":{"id":38451944,"uuid":"448874683","full_name":"quavedev/alert-react-tailwind","owner":"quavedev","description":"Meteor package that provides a plug-and-play alert system for React with TailwindCSS","archived":true,"fork":false,"pushed_at":"2024-09-25T06:31:57.000Z","size":94,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-27T21:44:30.687Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quavedev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-17T11:56:39.000Z","updated_at":"2024-09-25T06:32:18.000Z","dependencies_parsed_at":"2022-08-19T06:00:31.781Z","dependency_job_id":null,"html_url":"https://github.com/quavedev/alert-react-tailwind","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Falert-react-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Falert-react-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Falert-react-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Falert-react-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quavedev","download_url":"https://codeload.github.com/quavedev/alert-react-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251569688,"owners_count":21610600,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T22:35:03.280Z","updated_at":"2025-04-29T19:33:07.653Z","avatar_url":"https://github.com/quavedev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# quave:alert-react-tailwind\n\n### MIGRATED TO https://github.com/quavedev/meteor-packages/tree/main/alert-react-tailwind\n\n`quave:alert-react-tailwind` is a Meteor package that provides a plug-and-play alert system for React with TailwindCSS.\n\n## Why\n\nIt is designed to simplify the process of showing alerts to users inside the app.\n\nWe are using `tailwindcss` styles.\n\nWe believe we are not reinventing the wheel in this package but what we are doing is like putting together the wheels in the vehicle :).\n\n## Installation\n\n```sh\nmeteor add quave:alert-react-tailwind\n```\n\nYou should have the following npm dependencies in your project, the versions listed below are the tested versions:\n\n- react@18.2.0\n- react-dom@18.2.0\n- react-router-dom@6.3.0\n- @headlessui/react@1.7.0\n- @heroicons/react@2.0.10\n\n## Usage\n\n### Configuration\n\nYou need to declare the context provider for the alerts, we recommend right after the Router from React Router, see `AlertProvider` in the example below:\n\n```js\nimport React from 'react';\nimport { BrowserRouter as Router } from 'react-router-dom';\nimport { Routes } from './Routes';\nimport { AlertProvider, Alert } from 'meteor/quave:alert-react-tailwind';\n\n// classnames tailwind alert:\n// 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\n\nexport const App = () =\u003e (\n  \u003cRouter\u003e\n    \u003cAlertProvider\u003e\n      \u003cdiv className=\"bg-indigo-50 h-full\"\u003e\n        \u003cAlert /\u003e\n        \u003cdiv 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\"\u003e\n          \u003cRoutes /\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/AlertProvider\u003e\n  \u003c/Router\u003e\n);\n```\n\nThis 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:\n\n![Notification Sample](notification-sample.png)\n\n### Tailwind\n\nBy default, we provide [tailwindcss](https://tailwindcss.com/) classes, you should include `safelist` property in your `tailwind.config.js`\n\n```js\n\n  safelist: [\n    'bg-white',\n    'duration-100',\n    'duration-300',\n    'ease-in',\n    'ease-out',\n    'fixed',\n    'flex',\n    'flex-1',\n    'flex-col',\n    'flex-shrink-0',\n    'focus:outline-none',\n    'focus:ring-2',\n    'focus:ring-indigo-500',\n    'focus:ring-offset-2',\n    'font-medium',\n    'h-5',\n    'h-6',\n    'hover:text-gray-500',\n    'hover:text-indigo-500',\n    'inline-flex',\n    'inset-0',\n    'items-center',\n    'items-end',\n    'items-start',\n    'max-w-sm',\n    'ml-3',\n    'ml-4',\n    'mt-1',\n    'mt-3',\n    'opacity-0',\n    'opacity-100',\n    'overflow-hidden',\n    'p-4',\n    'pointer-events-auto',\n    'pointer-events-none',\n    'pt-0.5',\n    'px-4',\n    'py-6',\n    'ring-1',\n    'ring-black',\n    'ring-opacity-5',\n    'rounded-lg',\n    'rounded-md',\n    'shadow-lg',\n    'sm:items-end',\n    'sm:items-start',\n    'sm:p-6',\n    'sm:translate-x-0',\n    'sm:translate-x-2',\n    'sm:translate-y-0',\n    'space-x-7',\n    'space-y-4',\n    'sr-only',\n    'text-gray-400',\n    'text-gray-500',\n    'text-gray-700',\n    'text-gray-900',\n    'text-green-500',\n    'text-indigo-600',\n    'text-red-500',\n    'text-sm',\n    'transform',\n    'transition',\n    'translate-y-0',\n    'translate-y-2',\n    'w-0',\n    'w-5',\n    'w-6',\n    'w-full',\n    'z-10',\n  ]\n```\n\nor this comment somewhere in your code to avoid purging these classes:\n\n```js\n// classnames tailwind alert:\n// 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\n```\n\n\n### Code usage\n\nIf you want to show an alert, you need to call `openAlert`, this function is produced by `useAlert` hook, see the example below:\n\n```javascript\nimport React from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Passwordless } from 'meteor/quave:accounts-passwordless-react';\nimport { useLoggedUser } from 'meteor/quave:logged-user-react';\nimport { useAlert } from 'meteor/quave:alert-react-tailwind';\n\nimport { RoutePaths } from '../general/RoutePaths';\n\nexport const Access = () =\u003e {\n  const { openAlert } = useAlert();\n  const { loggedUser } = useLoggedUser();\n  const navigate = useNavigate();\n\n  const onEnterToken = () =\u003e {\n    navigate(RoutePaths.HOME);\n    openAlert('Welcome!');\n  };\n\n  if (loggedUser) {\n    return (\n      \u003cdiv className=\"flex flex-col items-center\"\u003e\n        \u003ch3 className=\"text-lg px-3 py-2 text-base font-medium\"\u003e\n          You are already authenticated.\n        \u003c/h3\u003e\n        \u003cbutton onClick={() =\u003e navigate(RoutePaths.HOME)} type=\"button\"\u003e\n          Go Home\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n  return (\n    \u003cdiv className=\"flex flex-col items-center flex-grow\"\u003e\n      \u003cPasswordless onEnterToken={onEnterToken} /\u003e\n      \u003ca\n        onClick={() =\u003e navigate(RoutePaths.HOME)}\n        className=\"mt-5 text-base font-medium text-indigo-700 hover:text-indigo-600 cursor-pointer\"\n      \u003e\n        \u003cspan aria-hidden=\"true\"\u003e \u0026rarr;\u003c/span\u003e Back to Home\n      \u003c/a\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nWe 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.\n\n## Changes\n\nIf you want to keep your project up-to-date with the changes made here, read our [CHANGELOG](CHANGELOG.md).\n\n## Limitations\n\nN/A\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquavedev%2Falert-react-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquavedev%2Falert-react-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquavedev%2Falert-react-tailwind/lists"}