Alerts

• Description
• What this package is used for
• How to install and import
• How to use it
  • Properties of the provider
• Functions
  • Info
  • Warning
  • Error
  • Success
  • Promise
• Parameters
  • Info
  • Warning
  • Error
  • Success
  • Promise
• Next updates
  • To add
  • To change

Description

React package that adds a toastify component to the web page, to be able to call the alerts in any place of the webpage with a simple redux function.

This package, also makes sure that the same alert does not show twice at the same time

What this package is used for

This package uses react-toastify to create alerts across all the app, and react-redux to tell the alert component that should show an alert.

It contains a component, "AlertProvider", that adds the toastify component to the web page.

Even though it does not needs any parameter, it needs a store of @redux/toolkit to add the reducers that this package contains.

How to install and import

To install it use npm install @jgedff/alert_provider or yarn add @jgedff/alert_provider

All the components, reducers and functions can be imported with import { AlertProvider } from '@jgedff/alert_provider'

How to use it

Once you install it, you nedd a store of redux.

This store needs to configure a store with the property middleware, that it has to be set to an array function, that as a parameter has an input named getDefaultMiddleware.

This parameter is a function that must be executed with an object as a parameter. This object has a property named serializableCheck, and this property must be setted as another object that contains the properties ignoreState and ignoreActions as true.

Finally, outside the middleware property and still inside the configureStore property, you have to add the reducer property and set it as an object.

This object needs a property with the name alert and set it with the alertReducer that you will have to import from the package.

import { alertReducer } from "@jgedff/alert_provider";

export default configureStore({
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoreState: true,
        ignoreActions: true
      }
    }),
  reducer: {
    alert: alertReducer,
  }
})

With this configuration, you will just need to add the AlertProvider where you execute the dispatch for the alerts.

In order to add the AlertProvider, you have to import it, and then put the app or the components that will call the alerts inside like an HTML tag.

ReactDOM.createRoot(document.getElementById('root')!).render(
  <>
    <AlertProvider>
      <App />
    </AlertProvider>
  </>
)

Provider properties

Name | Type | Description :-|--|-: children | JSX.Element | React component limit | number or undefined | Sets a limit to the number of alerts that will show at the same time rtl | boolean or undefined | Sets the direction of the text, right to left (if it is true or undefined) or left to right (if it is true)

Functions

This package has 5 diferent alerts, and they are called using one function each type of alert.

All of this alerts use the functions from the alertReducer, so when you call it, you will have to call it using the useDispatch from redux.

Info alert

The function that calls the info alert is called infoAlert.

You can import it with import { infoAlert } from '@jgedff/alert_provider'

It needs a string as a parameter

import { useDispatch } from 'react-redux'
import { infoAlert } from '@jgedff/alert_provider'

export const Component = (): JSX.Element => {
  const dispatch = useDispatch()

  const callInfoAlert = (): void => {
    dispatch(infoAlert({ message: 'This alert show an alert with some information' }))
  }

  return (
    <button onClick={callInfoAlert}>Alert info</button>
  )
}

Warning alert

The function that calls the warning alert is called warningAlert.

You can import it with import { warningAlert } from '@jgedff/alert_provider'

It needs a string as a parameter

import { useDispatch } from 'react-redux'
import { warningAlert } from '@jgedff/alert_provider'

export const Component = (): JSX.Element => {
  const dispatch = useDispatch()

  const callWarningAlert = (): void => {
    dispatch(warningAlert({ message: 'This alert show a warning' }))
  }

  return (
    <button onClick={callWarningAlert}>Warning alert</button>
  )
}

Error alert

The function that calls the error alert is called errorAlert.

You can import it with import { errorAlert } from '@jgedff/alert_provider'

It needs a string as a parameter

import { useDispatch } from 'react-redux'
import { errorAlert } from '@jgedff/alert_provider'

export const Component = (): JSX.Element => {
  const dispatch = useDispatch()

  const callErrorAlert = (): void => {
    dispatch(errorAlert({ message: 'This alert show an error alert' }))
  }

  return (
    <button onClick={callErrorAlert}>Error alert</button>
  )
}

Success alert

The function that calls the success alert is called successAlert.

You can import it with import { successAlert } from '@jgedff/alert_provider'

It needs a string as a parameter

import { useDispatch } from 'react-redux'
import { successAlert } from '@jgedff/alert_provider'

export const Component = (): JSX.Element => {
  const dispatch = useDispatch()

  const callSuccessAlert = (): void => {
    dispatch(successAlert({ message: 'This alert show a success alert' }))
  }

  return (
    <button onClick={callSuccessAlert}>Success alert</button>
  )
}

Promise alert

The promise alert, is an alert that while loads something shows a message, and when it ends, if ends with a sucess, will show a success alert, and if it ends with an error, it will show an error alert.

The function that calls the it is named pormiseAlert.

You can import it with import { pormiseAlert } from '@jgedff/alert_provider'

It needs an object as a parameter

This object needs the property promise setted as a promise function, and the property config, that needs to be an object that contains the properties pending, success and error, and all of them, needs a string to show the text while loading, when it succeeds and when there is an error.

import { useDispatch } from 'react-redux'
import { pormiseAlert } from '@jgedff/alert_provider'

export const Component = () => {
  const dispatch = useDispatch()

  const dataLoader = async (): Promise<void> => {
    const apiValue: any = await fetch('http://localhost:9999/api/getUsers')
    const varValue = await apiValue.json()

    if (varValue) {
      console.log(varValue)
    } else {
      throw new Error('ERROR')
    }
  }

  const callPromiseAlert = (): void => {
    dispatch(pormiseAlert({
      promise: dataLoader(),
      config: {
        pending: 'Getting data...',
        success: 'The users are in the console!',
        error: 'There was an error while getting the users.'
      }
    }))
  }

  return (
    <>
      <button onClick={callPromiseAlert}>Get users</button>
    </>
  )
}

Parameters

infoAlert()

infoAlert({
  message: String,
  theme?: 'light', 'dark', 'colored' (Default theme: colored),
  icon?: JSX.Element
})

Shows the string parameter inside a blue alert.

You can change the theme, with the porperty theme.

You can change the icon that shows with the alert with the icon property

warningAlert()

warningAlert({
  message: String,
  theme?: 'light', 'dark', 'colored' (Default theme: colored),
  icon?: JSX.Element
})

Shows the string parameter inside a yellow alert.

You can change the theme, with the porperty theme.

You can change the icon that shows with the alert with the icon property

errorAlert()

errorAlert({
  message: String,
  theme?: 'light', 'dark', 'colored' (Default theme: colored),
  icon?: JSX.Element
})

Shows the string parameter inside a red alert.

You can change the theme, with the porperty theme.

You can change the icon that shows with the alert with the icon property

successAlert()

successAlert({
  message: String,
  theme?: 'light', 'dark', 'colored' (Default theme: colored),
  icon?: JSX.Element
})

Shows the string parameter inside a green alert.

You can change the theme, with the porperty theme.

You can change the icon that shows with the alert with the icon property

promiseAlert()

promiseAlert({
  promise: Promise<void>,
  config: {
    pending: String,
    error: String,
    success: String
  },
  {
    theme?: 'light', 'dark', 'colored' (Default theme: colored),
    icon?: JSX.Element
  }
})

While the promise is executed, the pending string will be shown in a white alert.

If it succeeds, the success string will be shown in a green alert.

If it ends with an error, ti will show the error string in a red alert.

You can change the theme, with the porperty theme.

You can change the icon that shows with the alert with the icon property

Next updates

To add

• Add toast with react components inside
• Add toast with callbacks
• Add redux configuration for toast changes (To check how to do it)

To change

• Change promiseAlert to be able to render diferent react components on each state of the promise
• Change promiseAlert to be able to have diferent icons on each state of the promise
• Change provider configuration to be able to decide where you want the alert to be shown