Simple Toast-like Prompt Popup – TaTa.js

Preview:

Description:

TaTa.js is an easy-to-use JavaScript plugin for showing toast-like notification popups on your web app.

Key features:

• 6 notification types: text, log, info, success, warning, error.
• 9 position values.
• Displays a progress bar to indicate the remained time.
• Fade or slide animations.
• onClick & onClose callbacks.

How to use it:

1. Install & import the TaTa.js library into the document.

# Yarn
$ yarn add tata-js
# NPM
$ npm install tata-js --save

import tata from 'tata-js'

<!-- OR -->
<script src="dist/tata.js"></script>

2.  The JavaScript syntax to create toast messages on the screen.

tata.text('Hello World', 'CSSScript.Com')
tata.log('Hello World', 'CSSScript.Com')
tata.info('Hello World', 'CSSScript.Com')
tata.success('Hello World', 'CSSScript.Com')
tata.warning('Hello World', 'CSSScript.Com')
tata.error('Hello World', 'CSSScript.Com')

3. Set the position of the toast message. Default: tr (top right).

• tr: top right
• tm: top middle
• tl: top left
• mr: middle right
• mm: middle middle
• ml: middle left
• bl: bottom left
• bm: bottom middle
• br: bottom right

tata.text('Hello World', 'CSSScript.Com', {
  position: 'tm'
})

4. Specify the duration of the toast message. By default the toast message will auto dismiss after 3 seconds.

tata.text('Hello World', 'CSSScript.Com', {
  duration: 5000
})

5. Make the toast message always be visible.

tata.text('Hello World', 'CSSScript.Com', {
  holding: true
})

6. Show a close button inside the toast message. Default: true.

tata.text('Hello World', 'CSSScript.Com', {
  closeBtn: false
})

7. Show a progress bar inside the toast message. Default: true.

tata.text('Hello World', 'CSSScript.Com', {
  progress: false
})

8. Change the animation of the toast message. Default: ‘fade’.

tata.text('Hello World', 'CSSScript.Com', {
  animate: 'slide'
})

9. Callback functions.

tata.text('Hello World', 'CSSScript.Com', {
  onClick: null,
  onClose: null
})