Light

2nthony / vercel-toast Goto Github PK

View Code? Open in Web Editor NEW

89.0 2.0 10.0 1.68 MB

💬 Framework-agnostic vercel design's toast component (≈1KB Gzipped)

Home Page: https://vercel-toast.vercel.app

License: MIT License

TypeScript 47.34% JavaScript 7.98% CSS 39.90% HTML 4.20% Shell 0.58%

toast css framework-agnostic lightweight zeit vercel popup message widget

vercel-toast's Introduction

vercel-toast

Framework-agnostic vercel design's toast component

Usage

Bundler

npm i vercel-toast

// in js file
import 'vercel-toast/css'
import { createToast } from 'vercel-toast'

createToast('Hi from vercel toast!')

Browser CDN

<link
  rel="stylesheet"
  href="https://unpkg.com/vercel-toast/dist/vercel-toast.css"
/>

<script src="https://unpkg.com/vercel-toast"></script>

<script>
  vercelToast.createToast("Hi from vercel toast!");
</script>

Documentation

https://vercel-toast.vercel.app

Credits

vercel/design's toast

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

License

MIT © 2nthony

vercel-toast's People

Contributors

Stargazers

Watchers

Forkers

eviiit nberlette m0rtadelo bonniss destroymayor masscodeio ljp10086 stonega codiri ntnyq-dev

vercel-toast's Issues

the node to be removed is not a child of this node

v1.8.0

feat: multiline for the content

https://vercel.com/design/toast#multiline

error in `iife`

feat: support `options.prefixClassName`

Allow to set the position

I'm aware this is based on vercel's design approach, but as with other libs there is a position property we can pass so we change the anchor point, something along the lines of:

top-left top-center top-right
left center right
bottom-left bottom-center bottom-right

I've read the documentation it doesn't seem to point to this option being available.

--
Thank you

feat: add stack effect

Add stack effect

Expect

Expect hovering effect like zeit/design's toast

but current version will do nothing when hovering

feat: `dark` type

similar to the dark theme

perf: use `empty` to remove all children

Like jQuery.empty()

fix: support iPhone X series safe area

refactor: use esbuild for `index.ts`

Rewrite in Svelte

Gzip size may increase.

feat: support multiple actions

We want to let the user have choices

e.g.: Hello world! [do sth] [dismiss]

feat: support DOM as message

It can possible to adding custom elements in message.

Invalid typo destory

Invalid typo in method destroy of Toast

actual name: destory
correct name: destroy

https://github.com/evillt/vercel-toast/blob/3aecd2f20addd4158614116928ab4d9dbd2d8bb1/src/index.ts#L115

feat: add vue component

posts

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

chore(deps): update dependency vue to v3

Detected dependencies

github-actions

.github/workflows/publish.yml

actions/checkout v4

actions/setup-node v3

npm

package.json

@2nthony/eslint-config ^1.0.1

@saika/github-corner 0.1.3

@vitejs/plugin-vue2 ^2.2.0

eslint ^8.36.0

husky 8.0.3

lint-staged 13.3.0

postcss 8.4.38

postcss-preset-env 8.5.1

saika 2.13.10

saika-code-block-buttons 1.0.1

tsup 6.7.0

typedoc 0.23.27

typescript 5.0.4

vite 4.5.3

vue 2.7.16

vue-template-compiler 2.7.16

vuedown 3.2.0

Check this box to trigger a request for Renovate to run again on this repository

improvement: support from different `source`

source might be the two different sub-app under a micro-frontend.

The each sub-app will have their own initial config(which mean is empty instances)

feat: support `options.appendTo`

Error removing el from Node

After the execution of destoryAllToasts some errors happen:

on:
https://github.com/evillt/vercel-toast/blob/3aecd2f20addd4158614116928ab4d9dbd2d8bb1/src/index.ts#L119

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.