# tailwind-notifications-react

> simple and minimal notifications (toasts) component for use with react that you can use within seconds

Latest version **0.2.1** (published 2022-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwind-notifications-react
pnpm add tailwind-notifications-react
yarn add tailwind-notifications-react
bun add tailwind-notifications-react
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2022-09-14 |
| First published | 2022-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 3.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | sankalpmukim |
| Maintainers | sankalpmukim |

## Links

- npm: https://www.npmjs.com/package/tailwind-notifications-react
- Repository: https://github.com/sankalpmukim/tailwind-notifications-react
- Homepage: https://github.com/sankalpmukim/tailwind-notifications-react#readme
- Issues: https://github.com/sankalpmukim/tailwind-notifications-react/issues
- npm.io page: https://npm.io/package/tailwind-notifications-react

## Dependencies (2)

- [@heroicons/react](https://npm.io/package/@heroicons/react.md) ^1.0.6
- [@headlessui/react](https://npm.io/package/@headlessui/react.md) ^1.6.6

## Recent versions

- 0.2.1 (latest) — 2022-09-14
- 0.1.0 — 2022-09-03
- 0.0.1 — 2022-08-30

## README

# tailwind-notifications-react

> simple and minimal notifications (toasts) component for use with react that you can use within seconds

[![NPM](https://img.shields.io/npm/v/tailwind-notifications-react.svg)](https://www.npmjs.com/package/tailwind-notifications-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save tailwind-notifications-react --legacy-peer-deps
```

## Usage

### Setup Context Provider

Place the notifications context wrapper in the root of the application.

And import the css file like shown.

```tsx
import React, { Component } from 'react'
import { NotificationProvider } from 'tailwind-notifications-react'
import 'tailwind-notifications-react/dist/index.css'

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <NotificationsProvider>
      <App />
    </NotificationsProvider>
  </React.StrictMode>
);

```

### How to use?

```tsx
import { useNotify } from "tailwind-notifications-react";

const MyComponent = () => {
  const notify = useNotify();

  return (
    <button
      onClick={() => {
        notify({
          title: "Nice",
          message: "Hello, this is message",
          type: "success",
        });
      }}
    >{`Press me`}</button>
  );
};

```

### About Me

I am a passionate coder who loves Typescript and React. I found myself reusing my old code for this notifications package wayy too often so I just made it a package for my own convenience.

While this was made for the purpose of a personal utility with minimalist goals in mind. I would love feedback and suggestions/feature requests with the true spirit of open source!

## License

MIT © [sankalpmukim](https://github.com/sankalpmukim)

---
_Source: https://npm.io/package/tailwind-notifications-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._