primereact-lazy

Simple React Component for reusable, easy and simple Primereact basic components

Install

npm install --save primereact-lazy

Usage - Primereact Growl Alert (Notification/Warning/Info/etc)

import React from 'react'
import { AlertProvider } from 'primereact-lazy'

export function Layout() {
  return (
    <AlertProvider>
      <YourComponentToWrap />
    </AlertProvider>
  )
}

Then inside any of your wrapped Component

import { alertSwitch } from 'primereact-lazy'

const ComponentInProvider = () => {
  const alert = alertSwitch() // method to call growl alert

  return(
    ...
  )

}

export default ComponentInProvider

Usage - Primereact Dialog Confirmation Prompt

import React, { Component } from 'react'

import { DialogProvider } from 'primereact-lazy'

export function Layout() {
  return (
    <DialogProvider>
      <YourComponentToWrap />
    </DialogProvider>
  )
}

Then inside any of your wrapped Component

import { dialogSwitch } from 'primereact-lazy'

const ComponentInProvider = () => {

  const showPrompt = dialogSwitch() //method to call dialog confirmation

  return(
    ...
  )

}

export default ComponentInProvider

then simply call Alert / Dialog Confirmation

//alert

// 1. for single alert
alert.show({
  title: 'Oops',
  message: 'Your message is Oops',
  type: 'error', //accepts error, info, success, warning
})

// 1. multiple alert simultaneuosly
alert.multiple([
  {
    title: 'Attention!',
    message: `You have attempt to edit a file`,
    type: 'warning',
    life: 5000,
  },
  {
    title: 'Error',
    message: `You cannot do that`,
    type: 'error',
    life: 5000,
  },
])

// dialog confirmation

showPrompt({
  header: 'Warning',
  content: 'Initialize ?',
  onConfirm: () => yourOnConfirmHandler(),
})

aditional parameters

1. AlertProvider

• sticky (default:false) the alert sticks to screen unless closed manually
• closable (default:true) alert message is closeable
• life (default: 3000) timeout for alert until it closed in miliseconds

more info : Link

2. DialogProvider
   • header (default: '') Title on dialog
   • content (default: null) Content to describe what the dialog intends
   • onConfirm (default: null) Callback function when choosing yes/ok on onconfirmation
   • onCancel (default: null) Callback function when choosing cancel on onconfirmation
   • pos (default: 'center') Position of Dialog Confirmation 'top', 'bottom', 'left', 'right', 'topleft', 'topright', 'bottomleft' or 'bottomright'.
   • okLabel (default: 'Ok') Label on Confirmation Button
   • cancelLabel (default: 'cancel') Label on Cancel Button

more info : Link

License

MIT © Raeneldis A. Sadra