@moreirapontocom/npmhelpers v1.2.126

Components

Alert

ColumnsMatcher

If columnsFrom and columnsTo have different length, it will show a warning, but you can still use the component.

<ColumnsMatcher
  columnsFrom={["array","of","columns"]}
  columnsTo={["columns","to","match"]}
  fromDescription="Columns from..."
  toDescription="Columns to..."
  onMatchColumns={(columns: any) => console.log(columns)}
/>

Confirm

Need to include ConfirmProvider (included in this package).

root.render(
  <React.StrictMode>
    <ConfirmProvider>
      <App />
    </ConfirmProvider>
  </React.StrictMode>
);

Usage:

import { Confirm } from "@moreirapontocom/npmhelpers";

const {setConfirm} = useContext(ConfirmContext);

<Confirm />

<button
  ...
  onClick={() => {
    setConfirm({
      type: "danger", // primary || success || danger || info || warning
      title: "<Confirm title>",
      message: "<Confirm message>",
      buttonLabel: "<Button label>",
      buttonCancelLabel: "<Button Cancel label>",
      onConfirm: () => {
        // Do something
      },
    })
  }}>
    Button label
  </button>

DownloadXlsx

buildXlsx

Expander

Loading

CustomModal

Popover

<CustomPopover
  header="Header"
  body="body">
    ...
</CustomPopover>

Separator

TextWithTooltip

<TextWithTooltip
  id="unique-id"
  tooltip="Tooltip text">
    Children (button, link, text, etc)
</TextWithTooltip>

Upload

To read a CSV file and get its content:

<Upload
  accept="text/csv"
  folder=""
  showProgress={BOOLEAN}
  loading={BOOLEAN}
  onUpload={(e: any) => console.log(e)} />

You can also read any file and upload it to Firebase Storage Bucket. (This feature is working but the doc is not ready yet).

Contexts

AlertContext

AlertProvider

UserContext

UserProvider

ConfirmContext

ConfirmProvider

Helpers

convertFirebaseTimestampToString

convertUrlToLink

copyToClipboard

currencies

currencyFormatter

detectUrlInString

formatBytes

formatNumberToCurrency

generateGoogleCalendarLink

generateRandomNumber

generateRandomString

getCurrencyDetails

hideEmail

isCPFValid

isCPFValid("01234567890"); // true
isCPFValid("12345"); // false

isDOB

isValidEmail

isValidEmail("email@domain.com"); // true
isValidEmail("email@domain"); // false
isValidEmail("email.com"); // false

isValidUrl

isValidUrl("https://google.com"); // true
isValidUrl("google.com"); // true
isValidUrl("google@com"); // false

onlyNumbers

const phone: any = "+1 (805) 123-456";
onlyNumbers(phone); // 1805123456

openWhatsappChat

removeDuplicatesFromArray

searchZipcode

await searchZipcode("BR_ZIPCODE_HERE").then((response: any) => {
  console.log(response);
});

Response:

{
  bairro: "<...>"
  cep: "<...>"
  complemento: "<...>"
  ddd: "<...>"
  gia: "<...>"
  ibge: "<...>"
  localidade: "<...>"
  logradouro: "<...>"
  siafi: "<...>"
  uf: "<...>"
}

shareToWhatsapp

sleep

slugifyString

const str: string = "This is my super-cool string"
slugifyString(str); // this-is-my-super-cool-string

truncateString