Welcome to Flashy

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

A web component by Alex Zissis. Special thanks to Grace Cox for the logo.

Links:

Toggle All Code Snippets

Flashy Messages

Flashy messages are minimilistic, concise messages that are shown to the user, often to convey the outcome of an action. Flashy messages work in a queue system. Try adding Flashy messages below and see what happens.

Add Error Add Warning Add Info Add Success

Getting Started

To get started, simply include Flashy in your HTML. You can then create a simple flash message like below.

                            
                                <script src="https://unpkg.com/flashy-js@latest/dist/flashy.min.js"></script>
                                <flash-messages data-max-messages="5"></flash-messages>
                                <script>
                                    // now you have Flashy available as a global varirable
                                    Flashy('flash-messages', {
                                        type: 'success',
                                        title: 'Now you can use flashy',
                                        message: `Simply call the Flashy
                                            function like this`,
                                        globalClose: true,
                                        expiry: 5000
                                    });
                                </script>

Basic Flash Messages

There are 4 types of flash messages in Flashy; error, warning, info and success.

error

                
                    Flashy('.my-flash-message-element', {
                        type: 'error',
                        text: 'error example',
                        message: `This is what an error 
                            flash looks like!`,
                    });

Recreate Flash Toggle Code

warning

                    
                        Flashy('.my-flash-message-element', {
                            type: 'warning',
                            text: 'warning example',
                            message: `This is what a warning 
                                flash looks like!`,
                        });

Recreate Flash Toggle Code

info

                    
                        Flashy('.my-flash-message-element', {
                            type: 'info',
                            text: 'info example',
                            message: `This is what an info 
                                flash looks like!`,
                        });

Recreate Flash Toggle Code

success

                
                    Flashy('.my-flash-message-element', {
                        type: 'success',
                        text: 'success example',
                        message: `This is what a success 
                            flash looks like!`,
                    });

Recreate Flash Toggle Code

Customisation

Each Flashy message accepts a styles object that you can use to customise the look of it. Click here for a full reference of what can be customised.

custom styling

                        
                                Flashy('.my-flash-message-element', {
                                    type: 'info',
                                    title: 'custom styling',
                                    message: 'look at these styles',
                                    globalClose: true,
                                    styles: {
                                        flashColor: '#3d3737',
                                        titleTextColor: 'salmon',
                                        msgTextColor: 'salmon',
                                        titleTextFont: `Arial, 
                                            Helvetica ,sans-serif`,
                                        msgTextFont: `Arial, Helvetica, 
                                            sans-serif`,
                                        iconBackgroundColor: '#291010',
                                    },
                                });

Recreate Flash Toggle Code

custom emoji

                
                        Flashy('.my-flash-message-element', {
                            type: 'info',
                            title: 'custom emoji',
                            message: 'check out the emoji!',
                            globalClose: true,
                            styles: {
                                icon: {
                                    type: 'unicode',
                                    val: '🤑',
                                },
                            },
                        });

Recreate Flash Toggle Code

Buttons

Flashy messages can also contain buttons! You can set the buttons up to close the message, or to execute a custom function.

prompt

                
                    Flashy('.my-flash-message-element', {
                        type: 'success',
                        title: 'something happened',
                        message: 'you have to click ok',
                        globalClose: false,
                        buttons: [
                            {
                                text: 'OK',
                                closesFlash: true,
                            },
                        ],
                    });

Recreate Flash Toggle Code

multiple buttons

                    
                        Flashy('.my-flash-message-element', {
                            type: 'error',
                            title: 'something happened',
                            message: 'you can click okay or cancel',
                            globalClose: false,
                            buttons: [
                                {
                                    text: 'OK',
                                    closesFlash: true,
                                },
                                {
                                    text: 'Cancel',
                                    closesFlash: true,
                                },
                            ],
                            styles: {
                                linkTextColor: 'black',
                            },
                        });

Recreate Flash Toggle Code

custom action

                        
                            function secretFunction() {
                                alert('wow');
                            }
                        
                            Flashy('.my-flash-message-element', {
                                type: 'warning',
                                title: 'something happened',
                                message: 'click ok!',
                                globalClose: true,
                                buttons: [
                                    {
                                        text: 'OK',
                                        closesFlash: false,
                                        action: secretFunction,
                                    },
                                ],
                            });

Recreate Flash Toggle Code