Issue with renderCustomContent

Hello,

Thank you for creating this package, it is very helpful! Unfortunately I wasn’t able to get renderCustomContent to work and I found that I had to change line 228 in FlashMessage.js to {!!message.renderCustomContent && message.renderCustomContent()} in order for it to work. Maybe this is something that you could look into? Thank you so much! 😃

[lucasferreira]

Hi @imouto2005

Now I get it. renderCustomContent was a contribution from other user to this lib, but I think it’s easy to solve your problem.

I main render method you could change this:

render() {
    const { renderFlashMessageIcon, renderCustomContent, MessageComponent } = this.props;
    const { message, visibleValue } = this.state;

    const style = this.prop(message, "style");
    const textStyle = this.prop(message, "textStyle");
    ...

In this:

render() {
    const { renderFlashMessageIcon, MessageComponent } = this.props;
    const { message, visibleValue } = this.state;

    const style = this.prop(message, "style");
    const textStyle = this.prop(message, "textStyle");
    const renderCustomContent = this.prop(message, "renderCustomContent");
    ...

The this.prop method are made just to deal with when the props comes from message or come from the instance 😉

Could you try over there and tell if it works?

[federicomiralles]

Hi @imouto2005

Now I get it. renderCustomContent was a contribution from other user to this lib, but I think it’s easy to solve your problem.

I main render method you could change this:

render() {
    const { renderFlashMessageIcon, renderCustomContent, MessageComponent } = this.props;
    const { message, visibleValue } = this.state;

    const style = this.prop(message, "style");
    const textStyle = this.prop(message, "textStyle");
    ...

In this:

render() {
    const { renderFlashMessageIcon, MessageComponent } = this.props;
    const { message, visibleValue } = this.state;

    const style = this.prop(message, "style");
    const textStyle = this.prop(message, "textStyle");
    const renderCustomContent = this.prop(message, "renderCustomContent");
    ...

The this.prop method are made just to deal with when the props comes from message or come from the instance 😉

Could you try over there and tell if it works?

I can confirm it works as expected!

Personally I think this approach is more flexible than having it as part of FlashMessage component. Indeed passing the renderCustomContent as another message option makes it more customisable because allows to tailor the JSX to be rendered from anywhere when it’s used to display messages globally.

@lucasferreira are you planning to release it any time soon?

BTW awesome work! Thanks!

Cheers,

Federico