Installations

npm install @jinntec/jinn-toast

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

16.19.1

NPM Version

8.19.3 Score

74.2

Supply Chain

98.7

Quality

79.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

0

Total

0

Closed

0

Releases

4

1.0.5

v1.0.5

Updated on Jul 05, 2023

1.0.4

v1.0.4

Updated on Jun 03, 2022

1.0.3

v1.0.3

Updated on Mar 09, 2022

1.0.2

v1.0.2

Updated on Jul 10, 2021

View All 4 releases

Languages

2

JavaScript

CSS

JavaScript (81.14%)

CSS (18.86%)

Developer

JinnElements

Download Statistics

Total Downloads

14,866

Last Day

74

Last Week

1,179

Last Month

5,529

Last Year

10,306

GitHub Statistics

MIT License

1 Stars

22 Commits

1 Forks

1 Watchers

1 Branches

2 Contributors

Updated on Jan 30, 2024

Maintainers

3

View All 2 Contributors

Package Meta Information

Latest Version

1.0.5

Package Id

@jinntec/jinn-toast@1.0.5

Unpacked Size

10.18 kB

Size

3.98 kB

File Count

7

NPM Version

8.19.3

Node Version

16.19.1

Published on

Jul 05, 2023

Total Downloads

Cumulative downloads

Total Downloads

14,866

Dependencies

2

lit-html toastify-js

Dev Dependencies

11

@open-wc/eslint-config @open-wc/prettier-config @open-wc/testing @web/dev-server @web/test-runner eslint eslint-config-prettier husky lint-staged np prettier

<jinn-toast>

Plain vanilla web-component wrapping toastify-js

This webcomponent follows the open-wc recommendation.

Installation

1npm i @jinntec/jinn-toast

Usage

1<script type="module">
2  import 'jinn-toast/jinn-toast.js';
3</script>
4
5<jinn-toast text="first toast with defaults"></jinn-toast>
6<jinn-toast text="second toast top left" position="left"></jinn-toast>
7<jinn-toast text="third toast bottom left" position="left" gravity="bottom"></jinn-toast>
8<jinn-toast text="fourth toast bottom left" position="right" gravity="bottom"></jinn-toast>
9<jinn-toast text="warning" duration="5000" data-class="warning" position="right" gravity="bottom"></jinn-toast>
10<jinn-toast text="error" duration="-1" data-class="error" close="true" position="left" gravity="bottom"></jinn-toast>
11

To display the toast by API:

document.getElementById('my-toast').showToast('hello');

Or by dispatching an 'jinn-toast' event to the respective toast element:

toast.dispatchEvent(
      new CustomEvent('jinn-toast', {
        composed: true,
        bubbles: true,
        detail: {
          text:'hello'
        },
      }),
    );

Most of orginal options are just copied from toastify-js. See their docs for further options.

Linting with ESLint, Prettier, and Types

To scan the project for linting errors, run

1npm run lint

You can lint with ESLint and Prettier individually as well

1npm run lint:eslint

1npm run lint:prettier

To automatically fix many linting errors, run

1npm run format

You can format using ESLint and Prettier individually as well

1npm run format:eslint

1npm run format:prettier

Testing with Web Test Runner

To run the suite of Web Test Runner tests, run

1npm run test

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

1npm run test:watch

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with `web-dev-server`

1npm start

To run a local development server that serves the basic demo located in demo/index.html

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

4

Security-Policy

Determines if the project has published a security policy.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.1

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@jinntec/jinn-toast

Installations

Developer Guide

No

ESM

16.19.1

8.19.3

Score

Pull Requests

0

1

0

1

Issues

0

0

0

Releases

Languages

Developer

JinnElements

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

14,866

Dependencies

Dev Dependencies

<jinn-toast>

Installation

Usage

Linting with ESLint, Prettier, and Types

Testing with Web Test Runner

Tooling configs

Local Demo with web-dev-server

10

10

4

0

0

0

0

0

0

0

2.1

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads

Local Demo with `web-dev-server`