@minna-ui/toasts

šŸ˜ø A fast, friendly, and fun web UI kit for everyone.

Stats

stars šŸŒŸissues āš ļøupdated šŸ› created šŸ£size šŸ‹ļøā€ā™€ļø
@minna-ui/toasts
Minified + gzip package size for @minna-ui/toasts in KB

Readme

NPM version NPM bundle size (minified + gzip) Licence

@minna-ui/toasts

A simple "toast" notification web component. It can be used standalone, in Svelte projects, or any JavaScript project.


NOTE: This package is unfinished.


TODO: Write note about @minna-ui/css interplay/dependency.

TODO: Example image.

TODO: Add link to demo and documentation page.

Usage

Standalone

The easiest way to use the component is to add the CDN hosted version directly in your HTML.

TIP: If you're already using a JavaScript bundler you should follow the the "Other JavaScript projects" instructions.

  1. Add the CSS and JS to your document, inside the <head></head>:
<link href="https://cdn.jsdelivr.net/npm/@minna-ui/toasts/dist/index.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/@minna-ui/toasts"></script>

Or use a specific version:

<link href="https://cdn.jsdelivr.net/npm/@minna-ui/toasts@0.0.0/dist/index.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/@minna-ui@0.0.0/toasts"></script>
  1. Add an element where you want the component to show in your document <body></body>:
<div id="minna-toasts"></div>
  1. Initialise the component:
<script>
  new MinnaToasts({
    target: document.querySelector('#minna-toasts'),
    data: {},
  });
</script>

Svelte projects

Because this is actually a Svelte component, using it in your Svelte projects is simple and allows for the most flexibility and best possible performance.

  1. Install the package:
yarn add @minna-ui/toasts
  1. Add to your Svelte component:

MySvelteComponent.html:

<MinnaToasts/>

<script>
  import MinnaToasts from '@minna-ui/toasts';

  export default {
    components: {
      MinnaToasts,
    },
  };
</script>

Other JavaScript projects

This component can also be used alongside any JavaScript project, regardless of your framework of choice, by using ES6 modules import.

  1. Install the package:
yarn add @minna-ui/toasts
  1. Add to your files:

my-example.html:

<div id="minna-toasts"></div>

my-example.js:

import MinnaToasts from '@minna-ui/toasts';

new MinnaToasts({
  target: document.querySelector('#minna-toasts'),
  data: {},
});

Licence

@minna-ui/toasts is part of Minna UI, an Apache-2.0 licensed open source project. See LICENCE.


Ā© 2018 We Are Genki

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.