Skip to content

Commit 886f255

Browse files
committed
Add examples for new features
1 parent 8b65c39 commit 886f255

File tree

1 file changed

+84
-6
lines changed

1 file changed

+84
-6
lines changed

README.md

Lines changed: 84 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,73 @@ Or if you prefer to go old-school javascript and a CDN:
106106
</head>
107107
```
108108

109+
### New from `v0.4`
110+
111+
#### Supporting Multiple Toast Containers
112+
113+
It's now easy to send toasts to different container targets within your app. For example:
114+
115+
```html
116+
<script>
117+
import { SvelteToast, toast } from '@zerodevx/svelte-toast'
118+
119+
// Sends a toast to default toast container
120+
toast.push('Yo!')
121+
122+
// Sends a toast to "new" toast container
123+
toast.push('Hey!', { target: 'new' })
124+
</script>
125+
126+
<style>
127+
.wrap {
128+
--toastContainerTop: 0.5rem;
129+
--toastContainerRight: 2rem;
130+
--toastContainerBottom: auto;
131+
--toastContainerLeft: 2rem;
132+
--toastWidth: 100%;
133+
font-size: 0.875rem;
134+
...
135+
}
136+
</style>
137+
138+
<!-- Default toast container -->
139+
<SvelteToast />
140+
141+
<!-- Another toast container -->
142+
<div class="wrap">
143+
<!-- Declare container with a unique `target` name -->
144+
<SvelteToast target="new" options={{ duration: 8000, intro: { y: -64 } }} />
145+
</div>
146+
```
147+
148+
#### Removing Multiple Toasts
149+
150+
`pop()` now accepts a filter function.
151+
152+
```js
153+
// Remove all toasts from "new" container
154+
toast.pop(i => i.target !== 'new')
155+
156+
// Or remove ALL active toasts from ALL containers
157+
toast.pop(0)
158+
```
159+
160+
#### Accepts Object as First Param
161+
162+
`push()` and `set()` can also take an object as its first parameter.
163+
164+
```js
165+
let id = toast.push('Yo!', { duration: 2000 })
166+
167+
// is semantically equivalent to
168+
id = toast.push({ msg: 'Yo!', duration: 2000 })
169+
170+
toast.set(id, { msg: 'Waddup!' })
171+
172+
// is semantically equivalent to
173+
toast.set({ id, msg: 'Waddup!' })
174+
```
175+
109176
## Theming
110177

111178
In general, use CSS variables - the following (self-explanatory) vars are exposed:
@@ -191,7 +258,7 @@ export const failure = m => toast.push(m, { theme: { ... } })
191258
Then simply import these stubs in your consuming component:
192259

193260
```js
194-
import { success, warning, failure } from './my-theme`
261+
import { success, warning, failure } from './my-theme'
195262

196263
// do something, then
197264
success('It works!')
@@ -261,11 +328,22 @@ toast.pop(id)
261328
toast.set(id, { options })
262329
```
263330

264-
## License
331+
## Development
265332

266-
ISC
333+
Standard Github [contributing workflow](https://gist.github.com/Chaser324/ce0505fbed06b947d962) applies.
334+
335+
### Tests
267336

268-
## To-do
337+
Testing is through [Cypress](https://www.cypress.io/). To run the tests headlessly:
338+
339+
```
340+
$ npm run test
341+
```
269342

270-
- [ ] Definitely improve the docs
271-
- [ ] Create some option presets
343+
## Changelog
344+
345+
Please refer to the [releases](https://github.com/zerodevx/svelte-toast/releases) page.
346+
347+
## License
348+
349+
ISC

0 commit comments

Comments
 (0)