Notify

Based on a react-toastify.

How to use

// notify.js
import { createNotify } from '@ulms/notify'
import { Alert } from 'PATH_TO_ANY_ALERT_COMPONENT' // any ui component 

// Set the default alert component and override the default settings if required
export const notify = createNotify(
  Alert,
  {
    size: 'l' // 's'|'l' ('s' - default value )
  }
)

// app.jsx
import { NotificationContainer } from '@ulms/notify'
import '@ulms/notify/es/index.css'

function App(){
  return (
    <div>
      <NotificationContainer
        isCompact={isMobileLayout} // it will change the position of the notification component
        {...containerProps} // pass any props from this page https://fkhadra.github.io/react-toastify/api/toast-container
      />
    </div>
  );
}

The positioning of the alert depends on the specified size.
The alert size 's' position has the value 'top-center'.
The alert size 'l' position has the value 'bottom-left'.

Examples

notify.error('Wrong file format')
notify.info('Wrong file format')
notify.success('Wrong file format')
notify.warn('Wrong file format')
notify.custom(<h1 style={{ background: 'black', color: 'white' }}>Wrong file format !</h1>)

If it is necessary to change the size of the alert and its positioning

notify.error(
  'Wrong file format',
  {
    size: 'l',
    position: 'top-center',
    // pass any props from this page https://fkhadra.github.io/react-toastify/api/toast/
  }
)

You can override the properties for the alert component

1 way

notify.error(
  'Wrong file format',
  { alertProps: { clear: true } }
)

2 way

notify.custom(
  <AlertComponent clear type='error'>
    Wrong file format
  </AlertComponent>
)