notchris

payload mask plugin

by notchris
Custom fields
v1
v2
^0.18.5 || ^1.0.0 || ^2.0.0
MIT

Overview

Summary generated from the README

Adds input masking to text fields in Payload collections and globals using the IMask library. The plugin is registered in the Payload config, and each text field defines its mask through the field's custom options. Options control whether the masked value is shown and whether the masked or raw value is saved.

Features

  • Input masking powered by IMask
  • Configured per text field through custom options
  • Option to show the mask value in the field
  • Option to save either the masked or unmasked value
  • Works on fields in both collections and globals

Use cases

  • Format phone numbers as editors type them in a text field
  • Enforce a consistent pattern for codes or identifiers entered in the admin panel

From the author

An input mask plugin for Payload

Installation

npm i payload-mask-plugin

17

Stars

0

Forks

2

Open Issues

2 years ago

Last Updated

0

Weekly Downloads

v1.0.2

npm Version

19.1 KB

Unpacked Size

2

Dependencies

GitHub stars

Trends appear after 7 days of data. Daily snapshots have not started yet.

npm weekly downloads

Trends appear after 7 days of data. Daily snapshots have not started yet.

Each point is npm's rolling 7-day download count.

Health Score

30/100Fair

Composite score based on GitHub activity, stars, npm downloads, publish recency, dependency count, and package size.

Badge for your README

Payload Directory health badge
Markdown
[![Payload Directory](https://payloaddirectory.dev/badge/812111820-root.svg)](https://payloaddirectory.dev/plugins/812111820-root)
HTML
<a href="https://payloaddirectory.dev/plugins/812111820-root"><img src="https://payloaddirectory.dev/badge/812111820-root.svg" alt="Payload Directory"></a>
Updated Jul 20, 2024Created Jun 8, 2024Published Jul 20, 2024

README

Payload Mask Plugin

Adds input masking to Payload.

image

Features:

  • Input masking using IMask

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;

Similar plugins