pzl-react-reusable-components

React Reusable Components

Installation

npm install pzl-react-reusable-components

Components

ConfirmDialog

Dialog used to confirm actions. Also contains React hook useConfirmationDialog.

Import

Import in the following way:

import { useConfirmationDialog } from 'pzl-react-reusable-components/lib/ConfirmDialog'

Using the hook

const [dialog, getResponse] = useConfirmationDialog()

async function deleteItem() {
  let response = getResponse({
    title: 'Delete item',
    subText: 'Are you sure you want to delete the item?'
  })
  if(response) {
    // Delete item
  }
}

return (
    <div>
      <div>
        <button text="Delete" onClick={deleteItem} />
      </div>
      {dialog}
    </div>
)

UserMessage

Display a message to the user. Uses a MessageBar from office-ui-fabric-react and supports markdown using react-markdown.

Import

Import in the following way:

import { UserMessage } from 'pzl-react-reusable-components/lib/UserMessage'

Using the hook

const [message, setMessage] = useMessage(5000)

async function deleteItem() {
  setMessage({ text: 'Item was deleted' , type: MessageBarType.success })
}

return (
    <div>
      <div>
        <button text="Delete" onClick={deleteItem} />
      </div>
      {dialog}
    </div>
)

Progress

Display progress to the user using the ProgressIndicator component from office-ui-fabric-react.

Import

Import in the following way:

import { Progress } from 'pzl-react-reusable-components/lib/Progress'

Using the hook

const [progress, startProgress, endProgress] = useProgress()

async function deleteItem() {
  startProgress('Deleting item', 'Please wait...')
  ....
  endProgress()
}

return (
    <div>
      <div>
        <button text="Delete" onClick={deleteItem} />
      </div>
      {progress}
    </div>
)

Toast

Display a temporarily message to the user using the MessageBar component from office-ui-fabric-react.

Import

Import in the following way:

import { Toast } from 'pzl-react-reusable-components/lib/Toast'

Using the hook

const [toast, setToast] = useToast(800)

async function deleteItem() {
  ....
  toast("Item was successfully deleted.")
}

return (
    <div>
      <div>
        <button text="Delete" onClick={deleteItem} />
      </div>
      {toast}
    </div>
)