TheBestTvarynka / yew-notifications

Notifications components library for Yew

yew-notifications

Table of content:

• Motivation
• How to use it
• Moving forward
• Meta
• Contributing

Notifications components library for Yew. It's like react-toastify but for yew and more simpler (so far 😏).

Documentation: https://yn-docs.qkation.com/yew_notifications/index.html

_{⬆️ demo site}

_{⬆️ demo site}

Where it already used?

• crypto-helper

Motivation

I was writing my personal project crypto-helper some time ago. I was forced to write awful code to add some notifications functionality to my web app. So, I decided to write this library that allows the easy showing of notifications to users.

Inspired by yew-toastrack: https://github.com/kinnison/linkdoku/tree/main/yew-toastrack .

How to use it

1. Decide which notification components to use. yew-notifications already has implemented standard notifications but you can write your own. See basic and custom examples for more information.

# Cargo.toml

# if you want to use standard notification components
yew-notifications = { git = "https://github.com/TheBestTvarynka/yew-notifications.git", features = ["standard-notification"] }

# if you decide to write and use custom notification components
yew-notifications = { git = "https://github.com/TheBestTvarynka/yew-notifications.git" }

2. Include yew-notification styles into your project:

<link data-trunk rel="sass" href="https://raw.githubusercontent.com/TheBestTvarynka/yew-notifications/main/static/notifications_provider.scss" />

This one below is needed only when you decide to use components from the yew-notifications:

<link data-trunk rel="sass" href="https://raw.githubusercontent.com/TheBestTvarynka/yew-notifications/main/static/notification.scss" />

Or you can copy scss file into your project and specify the path to it instead of the link. At this point, the scss file is one possible way to import styles.

3. Wrap needed components into NotificationProvider:

// Notification, NotificationFactory  - your notification types.
// They can be imported from this library or written by yourself (see `custom` example).
// component_creator is an instance of the NotificationFactory
<NotificationsProvider<Notification, NotificationFactory> {component_creator}>
    // some inner components
</NotificationsProvider<Notification, NotificationFactory>>

4. Spawn notifications:

use yew_notifications::use_notification;

// Notification - your notification type.
// It can be imported from this library or written by yourself (see `custom` example).
let notifications_manager = use_notification::<Notification>();
notifications_manager.spawn(Notification::new(...));

See the examples directory for the code examples.

Moving forward

At this point, this library has minimal functionality implemented. I plan to improve it continuously according to my needs. If you have any feature requests, then create an issue with the description. It'll be a priority for me.

Meta

Pavlo Myroniuk - [e-mail].

Distributed under the MIT license.

Contributing

Feel free to contribute.

1. Fork it (https://github.com/TheBestTvarynka/yew-notifications/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request