Obfuscate Text

A simple text mask for sensitive information that needs to be hidden.

Basic Usage

Inform the text to be obfuscated through the text property of the component.

••••••••••

<ObfuscateText text="foobar" />

Playground

••••••••••

Mask Char Count

Mask Char

Length To Keep

Text

Obfuscate All

Show Toggle

Custom character

In order to use a different character than •, set the maskChar property of the component.

⭕️⭕️⭕️⭕️⭕️⭕️⭕️⭕️⭕️⭕️

<ObfuscateText text="foobar" mask-char="⭕️" />

Length

By default, 10 characters will be displayed, but this number can be set via the maskCharCount property, regardless of the original text length

••

<ObfuscateText text="foobar" :mask-char-count="2" />

If you want some characters to be revealed, the lengthToKeep property can be set to let some characters visible, while obfuscating the rest.

••••••••••689

<ObfuscateText text="12345689" :length-to-keep="3" />

By default it will obfuscate characters at the start of the string, but the position property can be set to end to modify this behavior

123••••••••••

<ObfuscateText text="12345689" :length-to-keep="3" position="end" />

Toggling Obfuscation

••••••689

<ObfuscateText
  text="12345689"
  :length-to-keep="3"
  :mask-char-count="6"
  show-toggle
/>

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• <ObfuscateText />