Notification not dismissing and not showing timer bar when using custom content

[mdodge-ecgrow]

This is a sweet library! The others I tried were outdated and not working with functional components. Now I have a notification added to my component and it works fine when I don't use the 'content' parameter but instead use the type, title, and message. But when I switch to content, the notification stays on the screen and the moving timer bar never shows up.

Here is my code where I add the notification:

store.addNotification({
    //type: 'success',
    //title: 'Title',
    //message: 'Message',
    insert: 'top',
    container: 'top-right',
    animationIn: ['animated', 'bounceIn'],
    animationOut: ['animated', 'fadeOut'],
    dismiss: {
        duration: 5000,
        onScreen: true
    },
    content: (
        <Notification
            type={'success'}
            title={'Avg bag weight added!'}
            message={
                'Average bag weight of ' + avgWeight + 'lbs added.'
            }
        />
    )
});

And here is my Notification component:

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheckCircle } from '@fortawesome/free-regular-svg-icons';
import './customTypes.css';

const Notification = ({ type, title, message }) => {
    return (
        <div className={`notification-custom-${type}`}>
            <div className={'notification-custom-icon'}>
                <FontAwesomeIcon
                    className={'check-circle'}
                    icon={faCheckCircle}
                    size={'4x'}
                    style={{ color: '#ffffff' }}
                />
            </div>
            <div className={'notification-custom-content'}>
                <div className={'notification-title'}>{title}</div>
                <p className={'notification-message'}>{message}</p>
            </div>
        </div>
    );
};

export default Notification;

[mdodge-ecgrow]

Also, I don't see in the docs anywhere what container is referencing. An id or a class?

[teodosii]

Hey,

onScreen is not compatible with content usage. It's custom content, you're 100% handling that notification. onScreen works for default types as it's easily integrated into them. Custom content doesn't even subscribe to mouse events the way it's done for default types when onScreen is set to true.

It's also difficult to implement this for custom content as I'd have to update your content component after every tick in order for you to see some progress on that time-progress bar.

There's a bug now not taking your time into consideration when using both content and onScreen but it's not impacting or so since we're not supporting usage of both.

Container can take one of the following values as described in the README:

• top-left
• top-right
• top-center
• bottom-left
• bottom-right
• bottom-center

Containers get their classes as in notification-container-${CONTAINER}

Hope that answered your questions I'll let this open for now, but no plans atm to support this option.

[mdodge-ecgrow]

Aw that is a bummer. All I want is to show a font-awesome icon like your examples along with the title and message. No way to do that without using custom content huh? I really like that timer bar.

[mdecurtins]

FWIW this is also my use case, showing a font-awesome icon along with title and message. I appreciate the example code and CSS for the custom icon example.