https://github.com/notchris/payload-mask-plugin

An input mask plugin for Payload
https://github.com/notchris/payload-mask-plugin

imaskjs input-masking payload-plugin payloadcms regex

Last synced: 11 months ago
JSON representation

An input mask plugin for Payload

• Host: GitHub
• URL: https://github.com/notchris/payload-mask-plugin
• Owner: notchris
• License: mit
• Created: 2024-06-08T01:54:30.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-20T01:35:02.000Z (almost 2 years ago)
• Last Synced: 2025-07-19T22:22:56.170Z (11 months ago)
• Topics: imaskjs, input-masking, payload-plugin, payloadcms, regex
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/payload-mask-plugin
• Size: 249 KB
• Stars: 15
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Payload Mask Plugin

#### Adds input masking to [Payload](https://payloadcms.com/).

![image](https://github.com/notchris/payload-mask-plugin/blob/main/example.gif?raw=true)

### Features:

- Input masking using  [IMask](https://github.com/uNmAnNeR/imaskjs/tree/master?tab=readme-ov-file)

## Basic Usage

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

## Installation

```bash

yarn add payload-mask-plugin

```

```ts

// payload.config.ts

import { maskPlugin } from 'payload-mask-plugin'

export default buildConfig({

  ...

  plugins: [maskPlugin({ enabled: true })],

})

```

```ts

// 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;

```