# pre-toast

> ![alt tag](./toast.gif)

Latest version **1.0.6** (published 2017-05-17) · 0 weekly downloads

## Install

```sh
npm install pre-toast
pnpm add pre-toast
yarn add pre-toast
bun add pre-toast
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2017-05-17 |
| First published | 2017-03-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | recepkoseoglu, serayuzgur |
| Keywords | react, reactjs, toast, notification |

## Links

- npm: https://www.npmjs.com/package/pre-toast
- Repository: https://github.com/presort/pre-toast
- Homepage: https://github.com/presort/pre-toast#readme
- Issues: https://github.com/presort/pre-toast/issues
- npm.io page: https://npm.io/package/pre-toast

## Dependencies (5)

- [is-js](https://npm.io/package/is-js.md) 0.1.1
- [react](https://npm.io/package/react.md) ^15.4.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [material-ui](https://npm.io/package/material-ui.md) ^0.17.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.0.6 (latest) — 2017-05-17
- 1.0.5 — 2017-05-16
- 1.0.4 — 2017-03-30
- 1.0.3 — 2017-03-24
- 1.0.2 — 2017-03-10
- 1.0.0 — 2017-03-08
- 0.1.0 — 2017-03-08

## README

# Pre Toast
![alt tag](./toast.gif)

## Installation

```
npm install --save pre-toast
```

## Usage

```js
import React from 'react';
import Toast from "pre-toast/lib/Toast";

class Example extends React.Component {

  createToast = (type) => {
    return () => {
      switch (type) {
        case 'info':
          Toast.info('Info message');
          break;
        case 'success':
          Toast.success('Success message', 'Title here');
          break;
        case 'warning':
          Toast.warning('Warning message', 'Close after 3000ms', 3000);
          break;
        case 'error':
          Toast.error('Error message', 'Click me!', 5000, () => {
            alert('callback');
          });
          break;
      }
    };
  };

  render() {
    return ( 
        <div>
            <button className='btn btn-info'
              onClick={this.createToast('info')}>Info
            </button>
            <hr/>
            <button className='btn btn-success'
              onClick={this.createToast('success')}>Success
            </button>
            <hr/>
            <button className='btn btn-warning'
              onClick={this.createToast('warning')}>Warning
            </button>
            <hr/>
            <button className='btn btn-danger'
              onClick={this.createToast('error')}>Error
            </button>
      </div>
    );
  }
}

export default Example;

```


## Toast Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|------------ |
| position | string | "top-right" | false | Desired position of toast to be shown on screen - "top-right" , "top-left" , "bottom-left" , "bottom-right" |
| maxVisible | number | 5 | false | any number |
| timeBar | bool | true | false | Toast timeout duration bar |

```js

let config={
    position:"top-left",
    maxVisible:5,
    timeBar: false
}

Toast.configuration(conf);
```

## Toast API

- Toast.info(message, title, timeOut, callback);
- Toast.success(message, title, timeOut, callback);
- Toast.warning(message, title, timeOut, callback);
- Toast.error(message, title, timeOut, callback);

| Name | Type | Description |
|------|------|-------------|
| message | string | The message string |
| title | string | The title string |
| timeOut | integer | The popup timeout in milliseconds |
| callback | function | A function that gets fired when the popup is clicked |

### Quick Start

#### 1. Get the latest version
You can start by cloning the latest version of pre-toast.

#### 2. Run `npm install`
This will install both run-time project dependencies and developer tools listed
in [package.json](./package.json) file.

#### 3. How to start project in Development Mode

This will start the development server and serve site application.

```shell
$ npm start
```
  
Open Browser and enter `http://localhost:3000` (default) 

### How to Build for Production

If you need just to build the app (without running a dev server), simply run:

```shell
$ npm run build
```

### How to Build for Site

If you need just to build the app (without running a dev server), simply run:

```shell
$ npm run site
```

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