# react-toast-wnm

> ## Installation

Latest version **1.1.3** (published 2020-12-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-toast-wnm
pnpm add react-toast-wnm
yarn add react-toast-wnm
bun add react-toast-wnm
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2020-12-10 |
| First published | 2020-09-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 39.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | carl32crc |
| Keywords | toast, toasts, notification, notifications, react-component, javascript, custom-toast, custom-toasts, runner, spies, stubs |

## Links

- npm: https://www.npmjs.com/package/react-toast-wnm
- npm.io page: https://npm.io/package/react-toast-wnm

## Dependencies (2)

- [uuid](https://npm.io/package/uuid.md) ^8.3.0
- [typestyle](https://npm.io/package/typestyle.md) ^2.1.0

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2020-12-10
- 1.1.2 — 2020-09-28
- 1.1.1 — 2020-09-07
- 1.1.0 — 2020-09-05
- 1.0.8 — 2020-09-04
- 1.0.7 — 2020-09-04
- 1.0.6 — 2020-09-04
- 1.0.5 — 2020-09-03
- 1.0.4 — 2020-09-03
- 1.0.3 — 2020-09-03
- 1.0.2 — 2020-09-03
- 1.0.1 — 2020-09-03
- 1.0.0 — 2020-09-03

## README

# [react-toast-wnm](https://www.npmjs.com/package/react-toast-wnm) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/carl32crc/react-toast-wnm/blob/master/LICENSE) [![codecov](https://codecov.io/gh/carl32crc/react-toast-wnm/branch/master/graph/badge.svg?token=N6PYSXWNYL)](https://codecov.io/gh/carl32crc/react-toast-wnm)

## Installation

```
$ npm install --save react-toast-wnm
$ yarn add react-toast-wnm
```

## Demo

[Check demo](https://carl32crc.github.io/react-toast-wnm/?path=/story/button--sample)

## Icons

[ikonate github](https://github.com/mikolajdobrucki/ikonate)
[ikonate icons](https://ikonate.com)

## Toast Hook Params

- `position` options -> `'bottom-right' | 'bottom-center' | 'bottom-left' | 'top-left' | 'top-center' | 'top-right'`.
- `type` options -> `'default' | 'error' | 'warning' | 'success' | 'info'`.

| Params                                 |Description                                                                               |
| -------------------------------------- | ---------------------------------------------------------------------------------------- |
| autoDismiss `boolean`                  | Default: `true`. Disable or enable dismiss autoclose toast.                              |
| backgroundColor `string`               | Default `''`. Toast backgroundColor                                                      |
| borderRadius `string`                  | Default `6px` . Toast border toast.                                                      |
| children `Object{actions, content}`    | Optional. Toast content and action custom.                                               |
| color `string`                         | Default `''`. Color text toast.                                                          |
| delay `number`                         | Default `3000`. The time until a toast will be dismissed automatically, in milliseconds. |
| enableAnimation `boolean`              | Default: `true`.                                                                         |
| height `string`                        | Default `104px`. Toast height.                                                           |
| isClosable `boolean`                   | Default `true` . Show or hide close button.                                              |
| padding `string`                       | Default `24px 32px`. Toast padding.                                                      |
| position `string`                      | Default `bottom-right`. Viewport place the toasts.                                       |
| subtitle `string`                      | Default `''`. Toast title.                                                               |
| title `string`                         | Default `''`. Toast subtitle.                                                            |
| type `string`                          | Default `default`. Type toast.                                                           |
| width `string`                         | Default `456px`. Toast width.                                                            |

## Default sample use

```jsx
import { useToast } from 'react-toast-wnm'

const MyComponent = () => {
  const toast = useToast();

  return (
    <Button
      onClick={(): void => {
        toast({
          autoDismiss: true,
          enableAnimation: true,
          delay: 3000,
          type: 'success',
          borderRadius: '6px',
          position: 'bottom-right',
          height: '104px',
          padding: '24px 32px',
          subtitle: 'Default subtitle',
          title: 'Default title',
          width: '456px'
        });
      }}
    >
      Create my custom toast
    </Button>
  );
}

```

## Custom sample use

```jsx
import { useToast } from 'react-toast-wnm'

const CustomContent = () => (
  <div className={myCustomContentStyles}>
    <div>My custom title</div>
    <div>My custom subtitle</div>
  </div>
)

//When you create a custom actions 
// component, a closeToast prop is injected into your component.
const CustomActions = ({ closeToast, color, backgroundColor }) => (
  <div className={myCustomActionsStyles}>
    <button style={{ backgroundColor, color }} onClick={closeToast}>
      Button label
    </button>
    <button style={{ backgroundColor, color }}>Other button</button>
  </div>
)

const MyComponent = () => {
  const toast = useToast()

  return (
    <Button
      onClick={() => {
        toast({
          delay: 5000,
          backgroundColor: '#fff',
          borderRadius: '6px',
          color: '#000',
          position: 'top-right',
          actions: (
            <CustomActions
              color='purple'
              backgroundColor='red'
            />
          ),
          content: <CustomContent />,
     
        });
      }}
    >
      Create my custom toast
    </Button>
  )
}

```

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