notchris / payload-mask-plugin

An input mask plugin for Payload
https://www.npmjs.com/package/payload-mask-plugin
MIT License
5 stars 0 forks source link
imaskjs input-masking payload-plugin payloadcms regex

Payload Mask Plugin

Adds input masking to Payload.

image

Features:

Basic Usage

Install the plugin and use on a text field in a Collection or Global.

Installation

yarn add payload-mask-plugin
// payload.config.ts
import { maskPlugin } from 'payload-mask-plugin'

export default buildConfig({
  ...
  plugins: [maskPlugin({ enabled: true })],
})
// Add to a text field on a Collection or Global

const Examples: CollectionConfig = {
  slug: "examples",
  fields: [
    {
      type: "text",
      name: "example_mask",
      label: "Input Mask Example",
      placeholder: "Enter a US phone number"

      custom: {
        mask: "+{1}(000)000-00-00",
        showValue: true,
        saveMaskedValue: false
      },
    },
  ],
};

export default Examples;