Update README

zerodevx · Sep 17, 2020 · 89d5151 · 89d5151
1 parent b9f6604
commit 89d5151
Showing 1 changed file with 170 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1,170 @@
-# svelte-toast
+# svelte-toast
+
+> Simple elegant toast notifications.
+
+Because a demo helps better than a thousand API docs: https://zerodevx.github.io/svelte-toast/
+
+## Usage
+
+Install the package:
+
+```bash
+$ npm i -D @zerodevx/svelte-toast
+```
+
+The following are exported:
+
+*  `SvelteToast` as the toast container;
+*  `toast` as the toast emitter.
+
+### Svelte
+
+If you're using this in a Svelte app, import the toast container and place it in your app shell.
+
+`App.svelte`:
+
+```html
+<script>
+import { SvelteToast } from '@zerodevx/svelte-toast'
+
+// Optionally set default options here
+const options = {
+  ...
+}
+</script>
+
+...
+<SvelteToast {options} />
+
+```
+
+Use anywhere in your app - just import the toast emitter.
+
+`MyComponent.svelte`
+
+```html
+<script>
+import { toast } from '@zerodevx/svelte-toast'
+</script>
+
+<button on:click={() => toast.push('Hello world!')}>EMIT TOAST</button>
+```
+
+### Vanilla JS
+
+For any other applications with a bundler, something like this should work.
+
+```js
+import { SvelteToast, toast } from `@zerodevx/svelte-toast'
+
+const app = new SvelteToast({
+  // Set where the toast container should be appended into
+  target: document.body,
+  // Optionally set default options here
+  props: {
+    options: {
+      ...
+    }
+  }
+})
+
+toast.push('Hello world!')
+```
+
+### CDN
+
+Or if you prefer to go old-school javascript and a CDN:
+
+```html
+<html>
+<head>
+  ...
+  <script defer src="https://cdn.jsdelivr.net/npm/@zerodevx/svelte-toast@0"></script>
+</head>
+<body>
+<body>
+</html>
+```
+
+
+## Theming
+
+In general, use CSS variables - the following are exposed:
+
+```css
+ToastContainer {
+  top: var(--toastContainerTop, 1.5rem);
+  right: var(--toastContainerRight, 2rem);
+  bottom: var(--toastContainerBottom, auto);
+  left: var(--toastContainerLeft, auto);
+}
+
+ToastItem {
+  width: var(--toastWidth, 16rem);
+  height: var(--toastHeight, 3.5rem);
+  margin-bottom: var(--toastMarginBottom, 0.5rem);
+  background: var(--toastBackground, rgba(74,85,104,0.98));
+  color: var(--toastColor, #FFF);
+}
+
+ToastItemMessage {
+  font-size: var(--toastFontSize, 1rem);
+}
+
+ToastProgressBar {
+  background: var(--toastProgressBackground, rgba(66,153,225,0.98));
+}
+```
+
+So to apply your custom theme globally, do something like:
+
+```html
+<style>
+:root {
+  --toastBackground: #ABCDEF;
+  --toastColor: #123456;
+  --toastHeight: 300px;
+  ...
+}
+</style>
+```
+
+To apply overrides to a particular Toast Item, emit the toast with options:
+
+```js
+toast.push('Yo!', {
+  theme: {
+    '--toastBackground': 'cyan',
+    '--toastColor': 'black'
+  }
+})
+```
+
+## Options
+
+```js
+// Default options
+const defaults = {
+  duration: 4000,       // duration of progress bar tween
+  dismissable: true,    // allow dismiss with close button
+  initial: 1,           // initial progress bar value
+  progress: 0,          // current progress
+  reversed: false,      // insert new toast to bottom of stack
+  intro: { x: 256 },    // toast intro fly animation settings
+  theme: {}             // css var overrides
+}
+```
+
+## Toast API
+
+```js
+const id = toast.push(message, { options })
+toast.pop(id)
+toast.set(id, { object })
+```
+
+## To-do
+
+- [ ] Definitely improve the docs
+- [ ] Create some option presets
+