Skip to content

ealush/cinnamon-sugar

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 'cinnamon-sugar';
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

About

Companion package for butter-toast, provides styling options

Resources

Stars

Watchers

Forks

Packages

No packages published