Masked Environment Variables Table Block for React

The table renders the value as eight bullets followed by its last four characters until you press the toggle on that row, which is a button with aria-pressed. The real text is only put on the page for rows you have shown. Masking hides a value from a glance; it is not security, so never ship a real secret to the browser.

Each tab shows the variables of one scope, with a count in the tab, and All lists them together with the scope in its own column. The frame under the tabs keeps one height whichever tab you choose, and the rows you have revealed stay revealed when you switch.

They act on the tab you are looking at only. Each is a quiet, always-present button: if everything is already shown or hidden it answers in the status line instead of doing nothing silently.

The full value of that row, on the real clipboard. If the browser refuses, for example on a page that is not served over HTTPS, the status line says so instead of claiming it copied. The values here are samples with a demo prefix, so copying one exposes nothing.

The Updated and Scope columns go below the medium breakpoint and the scope moves under the key name, the tab names shorten (Prod and Dev) while keeping their full names for screen readers, and a long revealed value wraps inside its cell.

The variables are typed in the file and showing or hiding one is this page's state; nothing is read from or sent to a host. For real use, fetch only the variables the visitor may see, send the masked form by default and request a value from your server when its toggle is pressed.