Custom options in `alert.show()`

[dmikester1]

I am trying to run alert.show() in my component with some custom options. But the offset and containerStyle options don't seem to be taking for some reason. My code:

import { useAlert, positions } from 'react-alert';
...
alert.show(`Site Admin ${r.data.user.name} added!`, {
    timeout: 40000, // custom timeout just for this one alert
    type: 'success',
    position: positions.TOP_CENTER,
    offset: '56px',
    containerStyle: { width: 'max-content' },
    onOpen: () => {
        console.log('hey');
    }, // callback that will be executed after this alert open
    onClose: () => {
        console.log('closed');
    } // callback that will be executed after this alert is removed
});

The text in the alert was wrapping and looked funny, so I wanted the width to be max-content. It seems to be defaulting to 300px for some reason.

[besLisbeth]

Hi @dmikester1 The offset and containerStyle options should be passed to Provider as written in this part of docs

[dmikester1]

When you pass them in to the provider like that, that sets those options for the entire app right? Is there a way to customize them for each seperate alert?

[besLisbeth]

Try to create your own AlertTemplate with custom options. I think that would help

[dmikester1]

So what am I doing wrong here? The offset works, but the position and the containerStyle do not work.

// optional configuration
const options = {
    // you can also just use 'top center'
    position: positions.TOP_CENTER,
    timeout: 50000,
    offset: '56px',
    containerStyle: { width: 'max-content' }
};

ReactDOM.render(
    <AlertProvider template={AlertTemplate} {...options}>
        <App />
    </AlertProvider>,
    document.getElementById('root')
);