Installation
Section titled “Installation”- Package
@bigbang/ui- Import
import { MaskedValue } from '@bigbang/ui';- Source
- MaskedValue.tsx
- Storybook
- MaskedValue · Playground
MaskedValue is in the @bigbang/ui package.
import { MaskedValue } from '@bigbang/ui';
<MaskedValue value={key} label="Access key" copyable hideAfter={30000} />;The maskValue(value, options) helper is exported too, to mask text only.
visibleStart- Description
- Characters left visible at the start.
- Type
number
visibleEnd- Description
- Characters left visible at the end.
- Type
number
maskLength- Description
- A fixed number of mask characters, so the length of the value is not shown.
- Type
number
maskChar- Description
- The mask character.
- Type
string
valueRequired- Description
- The full value. It is never in the page while masked; only the visible ends are.
- Type
string
label- Description
- Names the value for screen readers, such as "Erişim anahtarı"; the root becomes a named group.
- Type
string
revealed- Description
- Shows the full value (controlled).
- Type
boolean
defaultRevealed- Description
- Shows the full value at first (uncontrolled).
- Type
boolean- Default
false
onRevealedChange- Description
- Called with the new state when the toggle or
hideAftershows or hides the value. - Type
(revealed: boolean) => void
hideAfter- Description
- Milliseconds after which a revealed value is masked again.
- Type
number
copyable- Description
- Adds a Copy button that copies the full value, even while it is masked.
- Type
boolean- Default
false
revealable- Description
- Hides the reveal toggle, for values that are only ever shown masked.
- Type
boolean- Default
true
className- Description
- Added to the root element; use it for layout only.
- Type
string
Data attributes
Section titled “Data attributes”data-component="masked-value"anddata-revealedwhile revealed.data-part:value,toggle.