Nitrogenous Polymorphic Molecule

    cinnamon-sugar

    1.0.0 • Public • Published

    Cinnamon Sugar

    Cinnamon sugar is a companion package for Butter-Toast. While Butter Toast provides a smooth toast stacking interface, Cinnamon-sugar is intended to be used as a styling library, fully compatible with Butter-Toast.

    Live Demo

    Installation

    npm install --save cinnamon-sugar

    Cinnamon-Sugar does not come pre-shipped with butter-toast, so if you don't already have it: npm install --save butter-toast

    How to use?

    To use Cinnamon-Sugar you need to import it alongside Butter-Toast, and add your custom config whenever you want to show a toast.

    import React, { Component } from 'react';
    import cinnamonSugar from '../../src';
    import ButterToast from 'butter-toast';
     
    class ShowOff extends Component {
     
        handleClick() {
            // in this example, I am using a `fresh` toast
            // since it has all the possible options
            const toast = cinnamonSugar({
                kind: 'fresh',
                theme: 'lite',
                picture: 'http://lorempixel.com/150/150/people',
                title: 'Amazing!', // you can also add jsx code here!
                message: 'Just showing off here...', // you can also add jsx code here!
                icon: 'bath' // literally any font awesome 4.7 icon
                // you may also add here regular butter-toast options, such as toastTimeout,
                // name, sticky, etc..
            });
     
            ButterToast.raise(toast)
        }
     
        render() {
            <span>
                <a href="#!" onClick={this.handleClick.bind(this)}>Click me to pop a toast</a>
                <ButterToast trayPosition="bottom-right"/>
            </span>
        }
    }
     
    export default ShowOff;

    What did I just see?

    So basically, the butter-toast raise function accepts a toast-object with all the data required for emitting it. Cinnamon-Sugar is a function that knows how to generate a valid toast oblect, and lets you add some custom attributes for customizing your toast to your liking.

    Since cinnamonSugar builds a valid toast-object, you may pass it any butter-toast configuration you would normally pass to the raise function, and it would be added to the toast object. Your cinnamonSugar call may look like this:

    const toast = cinnamonSugar({
        kind: 'slim',
        theme: 'dark',
        message: 'Just showing off here...',
        toastTimeout: 6000, // normal butter-toast option
        dismissOnClick: true // normal butter-toast option
    };

    There are four kinds of toasts, crisp, crunch, fresh and slim. Each has its own possible options, and its own themes:

    Kinds

    There are currently four different kinds of styles:

    • crisp Bright, clean looking toast notification, featuring an icon on the left (optional) and a close button on the right. Appears with a satisfying animation, and has hover effects both for the close button and for the whole tost itself.

      crisp accepts the following options:

      • message: (optional) Either a string or jsx/react component
      • title: (optional) Either a string or jsx/react component
      • icon: (optional) Any of font-awesome 4.7 icon names
      • noClose: hides the x button
      • theme: any of the supported themes

      The following themes are supported by default. Choosing one will paint the icon accordingly.

      • success (green)
      • error (red)
      • info (blue)
      • danger (orange)
      • golden
      • dark
      • default // no need to specify. light grey

      alt tag

    • crunch Plain, colored toast notifications. With an icon on the left, and an optional close button on the top right. The icon appears with a sliding animation.

      crunch accepts the following options:

      • message: (optional) Either a string or jsx/react component
      • title: (optional) Either a string or jsx/react component
      • icon: (optional) Any of font-awesome 4.7 icon names
      • noClose: hides the x button
      • theme: any of the supported themes

      The following themes are supported by default. Others may be added using custom CSS.

      • grey
      • red
      • blue
      • purple
      • orange
      • green

      alt tag

    • fresh Toast notifications that allow adding an image, an icon and a close button. Good especially for social media or live notification for messages.

      fresh accepts the following options:

      • message: (optional) Either a string or jsx/react component
      • title: (optional) Either a string or jsx/react component
      • icon: (optional) Any of font-awesome 4.7 icon names
      • picture: (optional) image url
      • noClose: hides the x button
      • theme: any of the supported themes

      The following themes are supported by default. Others may be added using custom CSS.

      • lite
      • dark

      alt tag alt tag

    • slim Thin, simple toast notifications. Goot for status updates, and action confirmations.

      slim accepts the following options:

      • message: Either a string or jsx/react component
      • theme: any of the supported themes

      The following themes are supported by default. Others may be added using custom CSS.

      • lite
      • dark

      alt tag

    Keywords

    none

    Install

    npm i cinnamon-sugar

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • ealush