Custom Alert Types

[kauffmanes]

Is there a way to add types of alerts? For example, I use error, info, and success, but I'd also like a "warn" that is yellow. Is there a preferred way of doing that, or am I limited to the existing types and adding styling? I read the other issues and didn't see anything that answered my questions, so sorry if this is a duplicate and I just am misunderstanding.

[schiehll]

Hey @kauffmanes!

So actually there's no way to add a new type, BUT you can pass any custom option while calling an alert, and it would be passed to the template.

So if you have a custom template, you can do something like:

const AlertTemplate = ({ style, options, message, close }) => (
  <div style={style}>
    {options.CUSTOM_TYPE === 'warn' && 'you are being warned: '}
    {options.type === 'info' && '!'}
    {options.type === 'success' && ':)'}
    {options.type === 'error' && ':('}
    {message}
    <button onClick={close}>X</button>
  </div>
)

And when calling an alert:

alert.show('some warning', { CUSTOM_TYPE: 'warn' })

In this case, it would show an alert that says you are being warned: some warning.

Hope it helps!

[yerlantemir]

Hi, how could I achieve it with typescript ? I am facing error TS2345: Argument of type '{ CUSTOM_TYPE: string; }' is not assignable to parameter of type 'AlertCustomOptionsWithType'.