teodosii / react-notifications-component

Delightful and highly customisable React Component to notify your users
https://teodosii.github.io/react-notifications-component/
MIT License
1.27k stars 73 forks source link

Set width of notification based on content #36

Closed chitgoks closed 4 years ago

chitgoks commented 4 years ago

Rather than setting a fixed value for width, it would be nice to have the width the same as the content of the text inside the notification.

teodosii commented 4 years ago

I doubt you checked that each notification gets width: 100% so it gets as wide as the container. The width option is to have more control over the notification.

chitgoks commented 4 years ago

i assumed that would be the case which is why i opened this since i started at not using the width property and it doesnt expand based on content text. ill retry and put up a sample

chitgoks commented 4 years ago

hi teodosii, so this is how i called it

function showNotification(message, type, duration) {
    store.addNotification({
        message: message,
        type: type ? type : 'success',
        insert: 'top',
        container: 'top-right',
        animationIn: ['animated', 'fadeIn'],
        animationOut: ['animated', 'fadeOut'],
        dismiss: {
          duration: duration ? duration : 3000
        }
    });
}

please see attached for result. notif

teodosii commented 4 years ago

Actually, my mistake here. It doesn't get set to width: 100%, it gets set to width: auto which is is basically 100% of the container. But containers do not have a predefined width, that's up to you or anyone else to have these set, and due to the fact they have no width, auto might behave different from case to case.

You either stick to setting the width manually per notification or set the width to each container.

teodosii commented 4 years ago

If you have any other questions, feel free to ask. These are at the moment the only 2 solutions - for me at least are enough - if you happen to have a better solution and it would benefit this library, I will gladly implement it. In the meantime I will close this issue.

chitgoks commented 4 years ago

ok that makes sense. it's not really urgent for me but ill look into this last once im done with my other tasks. ill get ack if i can find a solution. im still learning react now ;)