# FlashMessage

## Props

- ***type***: string: success, error, alert, notice
- ***text***: string: component's body text
- ***animated***: bool: Should Flash Message animate on enter?
- ***zIndex***: number: If you want the FlashMessage to animate behind another FlashMessage, give it a lower zIndex value than the previous FlashMessge.
- ***depth***: number: Shadow zDepth
- ***onMessageClick***: function: Assign a custom function to call when the message body is clicked
- ***closeCustomFontIcon***: string: Assign a custom close icon (i.e. "fa-times") -- currently only supports Font Awesome


## Methods

- ***dismiss()***: dismiss the FlashMessage
()

## JSX Usage

```
<FlashMessage animated={true} text="I am a FlashMessage and I'm really cool." type="notice" zIndex={1} />,

```

**instance Flash Messages dynamically using state triggered by an event such as onClick **

```
export default React.createClass({


    getInitialState() {
        return({
            flashMessages: [{ 
                text: "I'm a a really cool FlashMessage",
                type: "success",
                animated: true,
                depth: 1,
                zIndex: 100,
                key: 1,
                onMessageClick: this._handleFlashMessageClick, 
            }]
        });    
    },

    render() {
        return ( this.renderFlashMessage() );
    }
   
    _renderFlashMessage(){
        let flashMessages = this.state.flashMessages.map(function(message) {
            return <FlashMessage 
                    key={message.key} 
                    animated={message.animated} 
                    text={message.text} 
                    type={message.type} 
                    zIndex={message.zIndex} 
                    onMessageClick={message.onMessageClick}
                    closeCustomFontIcon={message.closeCustomFontIcon}/>
        });

        return (
        <div>
            <div>
                {flashMessages}
            </div>
        </div>
        )
    },

    _handleAddFlash() {
        
        var data = this.state.flashMessages.slice(0); // Clone this.state.flashMessages array
        // Push to cloned array
        data.push({
                text: 'I am a NEW Flash Message',
                animated: true,
                type: 'notice',
                closeCustomFontIcon: 'fa-times',
                depth: 1,
                zIndex: this.state.flashMessages[this.state.flashMessages.length-1].zIndex-1, // zIndex of the last child in array -1
                onMessageClick: this._handleFlashMessageClick,
                key: this.state.flashMessages[this.state.flashMessages.length-1].key+1 // get key of last child in array and +1
            })

        // Set the cloned array as the new array.
        this.setState({
            flashMessages: data
        });
    },
});

```