LUADevStudio® | LUAlert

LUAlert is a typescript react js component for displaying customizable alerts with a global API. LUAlert is an alert made with zero dependencies.

SEE A DEMO HERE

Install

npm install --save @weareluastudio/lualert

Usage

import React from 'react'
import withAlerts from '@weareluastudio/lualert'

const App = () => {
  // ALERT
  const showAlert = () => window.Alert('Hello world')

  return <button onClick={showAlert}>Show</button>
}

// ALERT HOC
export default withAlerts()(App)

withAlerts() Props

You can define some properties for all alerts in your application, such as color, text, and effects. For example with the hoc:

IMPORTANT: you need only one withAlerts() in your project. As a recommendation put it in the App component.

// ALERT HOC
export default withAlerts()(App)

// ALERT HOC WITH GLOBAL PROPS
export default withAlerts({ ...props })(App)

With typescript you must define the component props type

// ALERT HOC WITH GLOBAL PROPS
export default withAlerts<PropsType>({ ...props })(Component)

All HOC props

Name	Type	Description	Default	Optional
confirmColor	string	The background color for "Accept" button.	#2196f3	true
confirmText	string	The label for "Accept" button.	Accept	true
cancelText	string	The label for "Cancel" button.	Cancel	true
errColor	string	The background color for "Accept" button on alert with error type.	#ff5252	true
blurred	boolean	(Experimental) define the background effect on alerts.	false	true

Alert props

You can define custom alerts with titles, texts, buttons and reactjs components within the alert, you can also define the interaction with the user. For example, this custom alert:

window.Alert({
  title: 'My alert title',
  body: 'My alert plain text',
  type: 'confirm'
})

Or with custom react elements:

window.Alert({
  title: 'My alert title',
  body: 'My alert plain text',
  type: 'confirm',
  customElements: <MyComponent>
})

Nested alerts

window.Alert({
  title: 'Test1',
  body: 'Test1',
  type: 'confirm',
  nested: 'Test2'
})

window.Alert({
  title: 'Test1',
  body: 'Test1',
  type: 'confirm',

  nested: {
    title: 'Test2',
    body: 'Test2',
    type: 'confirm',

    nested: {
      title: 'Test3',
      body: 'Test3',
      type: 'confirm'
    }
  }
})

All alert props

Name	Type	Description	Default	Optional
type	'confirm' | 'window' | 'alert' | 'error'	Define the alert style and interaction.	'alert'	false
title	string	Title of the alert.	''	false
body	string	Alert content in text plain.	''	false
onConfirm	method	Dispatch onConfirm method when Accept button is pressed.	void	true
onHide	method	This method its always called when the Alert is closed.	void	true
onCancel	method	This method its called when the cancel button is pressed.	void	true
fixed	boolean	If you set true, the alert never close on some conditions.	false	true
customElements	JSX.Element	Wraps a custom elements or nested elements inside the alert body.	null	true
confirmText	string	Replace the "Accept" label for the current instance.	"Accept"	true
confirmBtn	JSX.ELement	Replace the whole "Accept" button for the current instance.	null	true
cancelText	string	Replace the "Cancel" label for the current instance.	"Cancel"	true
cancelBtn	JSX.Element	Replace the whole "Cancel" button for the current instance.	null	true
nested	AlertProps | string	Show an alert after the current hides.	null	true
resetOnHide	boolean	Reset alert content on hide (doesn't work with nested option).	false	true
maxWidth	number	Set the content box max width.	null	true
margins	number	Set the content box margins.	null	true
zIndex	number	Set the content box z position.	100	true

Global API

LUAlert has a global api that is exposed to the window object, which allows controlling the life cycle of an alert.

Name	Param types	Description	Default	Example
window.Alert()	string | AlertProps	Dispatch a new alert in app.	void	window.Alert('Hello')
window.hideAlert()	NO PARAMS	Force close the alert (not recommended)	void	window.hideAlert()

License

MIT © weareluastudio