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

flashy-js

v0.4.0

Published

Flashy is a lightweight, 0 dependency library that creates beatiful flash messages, using vanilla web components.

Downloads

7

Readme

Flashy

Build Status

Flashy is a 0 dependancy, lightweight flash messages library built using vanilla web components.

Demo

Demo Page

Installation

HTML

Simply include Flashy in your HTML using UNPKG

<script src="https://unpkg.com/flashy-js@latest/dist/flashy.min.js"></script>

or

<script src="./lib/flashy.min.js"></script>

Bower

Coming soon...

Contributing

To Do

  • [x] Create core functionality
  • [x] Allow for custom styles to be passed
  • [x] Allow for custom emojis to be passed to the flash message
  • [ ] Allow for other icons (svg, fa etc.) to be passed to the flash message
  • [ ] Allow for custom flash message types

Usage

<flash-messages data-max-messages="5"></flash-messages>

To start with inject the flash-messages element into your HTML. This acts as a container to all the messages.

Attributes

| Attribute | Type | Required | Default | Description | |-------------------|------|----------|---------|------------------------------------------------------------------------------------------------------------------------| | data-max-messages | int | false | 10 | The maximum amount of messages to store in the queue. When the maximum is reached, the oldest message will be removed. |

Importing the package exposes the global variable Flashy, which is a function.

Functions

Flashy(querySelector, options)

The Flashy function creates a new flash message to display to the user. The Flashy functions accepts two paramaters, querySelector and options.

Parameters

| Parameter | Type | Required | Description | |---------------|--------|----------|----------------------------------------------------| | querySelector | string | true | The query selector to the element | | options | object | true | Flash message config, see below table. |

Options

The acceptable values in the options object.

|Key| Type | Required | Allowable Values | Description | |--|--|--|--|--| | type | string | true | error / warning / info / success | The type of the flash message | | title | string | false | N/A | The title of the flash message | | message | string | false | N/A | The message displayede | | expiry | string | false | N/A (defaults to 0) | Time in MS until message will expire and disappear | | globalClose | boolean | false | true / false | Adds a close button to the flash message | | styles | object | false | N/A | CSS styles to customise the flash message. See below for the style definition |

Buttons

| Key | Type | Required | Allowable Values | Description | |-------------|----------|----------|------------------|-------------------------------------------------------------------| | text | string | true | N/A | Text to be shown on the button | | action | function | false | N/A | Function to be run when the button is clicked | | closesFlash | boolean | false | true / false | If set to true, clicking the button will remove the flash message |

Styles

| Key | Type | Required | Allowable Values | Description | |---------------------|-----------------|----------|------------------|-------------------------------------------------------------------------------------------------| | flashColor | CSS Color | false | N/A | Background color of the flash message | | titleTextColor | CSS Color | false | N/A | Color of the flash message title | | titleTextFont | CSS Font Family | false | N/A | Font family attribute of the flash message title | | msgTextColor | CSS Color | false | N/A | Color of the flash message content | | msgTextFont | CSS Font Family | false | N/A | Font family attribute of the flash message content | | linkTextColor | CSS Color | false | N/A | Color of the flash message buttons/links | | linkTextFont | CSS Font Family | false | N/A | Font family attribute of the flash message buttons/links | | icon | object | false | N/A | Object specifying the icon to be displayed with the message. See below for the icon definition | | iconBackgroundColor | CSS Color | false | N/A | Background color behind the icon |

Icon

| Key | Type | Required | Allowable Values | Description | |------|--------|----------|------------------|----------------------------------------------------| | type | string | true | unicode | Type of the icon (more to be added soon) | | val | any | true | N/A | Value of the icon. For unicode, character literal. |

Examples
Generic flash message
    Flashy('flash-messages', 
        {
            type: 'success',
            title: 'It worked',
            message: 'Lets rejoice',
        }
    );
Expiring flash message
    Flashy('flash-messages', 
        {
            type: 'info',
            title: 'Act quick',
            message: 'This will be gone in 5 seconds!',
            expiry: 5000,
            globalClose: false,
        }
    );
Action required
    Flashy('flash-messages', 
        {
            type: 'warning',
            title: 'Action required',
            message: 'Something happened and you need to click the button below or this will stay here',
            globalClose: false,
            buttons: [
                {
                    text: 'OK',
                    action: myCoolFunction,
                    closesFlash: true,
                },
                {
                    text: 'Cancel',
                    action: myBoringFunction,
                    closesFlash: false,
                },
            ],
        }
    );
Custom styling
    Flashy('flash-messages', {
        type: 'error',
        title: 'Custom styled',
        message: 'This is really ugly, so it will only last for 5 seconds',
        expiry: 5000,
        buttons: [
            {
                text: 'Close it now!',
                closesFlash: true,
            },
        ],
        globalClose: true,
        styles: {
            flashColor: '#fff',

            titleTextColor: '#000',
            titleTextFont: '\'Arial\' sans-serif',

            msgTextColor: 'pink',
            msgTextFont: '\'Arial\' sans-serif',

            linkTextColor: 'black',
            linkTextFont: '\'Arial\' sans-serif',

            icon: {
                type: 'unicode',
                val: '🤑',
            },
            iconBackgroundColor: 'grey',
        }
    });

Check out the website for project website https://alex-zissis.github.io/flashy