npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-delicious_toasts

v1.0.3

Published

React toasts-plugin that works with redux-thunk

Downloads

5

Readme

deliciousToasts - a simple react plugin

NPM

I've started a few weeks ago with react development. During playing in a real world app I came to the point where I've to show the user a notification. Through my previous projects I got to know and love toastr. I searched for an react implementation but nothing I've found was easy to understand or had few dependencies.

So I came up with the idea to implement notifications similar to toastr's own. Thanks to Robert Lyall's (@robertlyall) blog post, I found a good place to start. So this is the result of a bloody beginner in react. Maybe it'll help someone else out there.

Preview image of a toast

Feel free to place pull requests or open issues :fire:

Implementation Guide

1. Installation

TODO

2. Add the styles

import the scss file into your project

import 'react-delicious_toasts/src/styles/deliciousToasts.scss';
3. Add the reducer
import { combineReducers } from 'redux';
import {reducer as deliciousToasts} from 'react-delicious_toasts';
// [...]
const appReducer = combineReducers(
    {
        // [...]
        deliciousToasts,  // <- Mounted at deliciousToasts
    } );
// [...]
4. Add the container component into your app (root)
import React from "react";
import DeliciousToasts from 'react-delicious_toasts';

class App extends React.Component {

    // [...]

    render() {
        return (
            <div>
                {/*[...]*/}
                <DeliciousToasts />
                {/*[...]*/}
            </div>
        )
    }

}

export default App;

5. Dispatch an action from anywhere (with options)

import React from 'react';
import {connect} from 'react-redux';

import { createToastAction } from 'react-delicious_toasts';

const myFancyComponent = (props) => (
    <div>
        {/*[...]*/}
        <button onClick={() => props.createToast()}>Hallo</button>
        {/*[...]*/}
    </div>
);

const mapDispatchToProps = (dispatch) => {
    return {
            createToast: (options) => {
                dispatch(createToastAction(options));
            }
        }
};

export default connect((state) => {},mapDispatchToProps)(myFancyComponent);

toast options

Currently a toast has only a few options because I don't need more any for my use case. Feel free to add more.

const options = {
    icon: null, // any react element | max-width & height 30px
    color: "primary", // OPTIONAL any bootstrap bg-color
    message: 'So tasty! ' + String.fromCodePoint( 0x1F60B ), // any message (optional with emoji-codes)
    
    id: 12345 // OPTIONAL: If you want to delete your toast your from your application, you can set a manual ID here
}

Questions?

If you have any trouble or question feel free to open an issue :wink: