I am building a notifer component for my website. Basically one you hit say "add" and the item is "added" on the top of my website a green bar will come up and say "successfully created"

Now after a second I would like it to disappear. I am not sure what the best way to do this would be? Is it to have a javascript timer somewhere?

```
import React from 'react';

import 'materialize-css/sass/materialize.scss';
import 'font-awesome/scss/font-awesome.scss';

import 'materialize-css/js/materialize.js';
import classNames from 'classnames/index.js';

export default class Notifer extends React.Component {
    render() {
        var notifcationClasses = classNames({
            'notifcation-success': this.props.notiferReducer.success,
            'notifcation-error': this.props.notiferReducer.error,
            'hide': !(this.props.notiferReducer.success || this.props.notiferReducer.error)
        });
        return (
            <div id="notifcation" className={notifcationClasses}>
                Sucessfully created
            </div>
        );
    }
}

```

Action

```
import {actions}  from './Actions.js';

export function setNotifer(success) {
    return function (dispatch) {
        dispatch({ type: actions.SET_NOTIFIER, payload: success });
    };
}

```

Reducer

```
import { actions } from '../actions/Actions';

export default function NotiferReducer(state = {
    success: false,
    error: false
}, action) {
    switch (action.type) {
        case actions.SET_NOTIFIER: {
            return {
                success: action.payload,
                error: !action.payload
            };
        }
    }
    return state;
}

```

Normally I would use something like growl but I did not see anything for reactjs(well I did see some but none of them seemed to be very popular)