API Key Chip Developer Portal Navbar Block for React

Set KEY at the top of the file; the mask (MASKED) and the "ending in" text are derived from it. In an app, pass the key from your session instead. Copy always puts the whole key on the clipboard, masked or not, because the mask only changes what is drawn; the button's label says "Copy API key" and the result is announced. The key here is invented and does nothing.

Pressing Reveal sets the key as shown and starts one timer of SHOWN_MS (ten seconds); when it ends, the mask returns and a polite line says "Key hidden." Pressing the toggle again hides it at once and cancels the timer. There is no countdown to read and nothing else in the bar moves; change SHOWN_MS for another delay. The timer is a security measure, so it is not extended by hovering or focus.

The links sit in a nav named Main with the current page marked. The toggle is a button named "Reveal key" that reports whether it is pressed; while the key is masked it is read as "API key ending in 4f2a" (the dots are drawing), and when shown the key is read out as text. The announcements ("Key shown for 10 seconds.", "Key hidden.") come from a polite status that is present from load. The copy button reports success or failure through its own live text.

Below the xl breakpoint a menu button opens a sheet from the top with the links, the key chip (the key on its own line, the toggle and copy beneath it) and Dashboard; the chip leaves the bar below lg. The bar keeps the wordmark's icon and "Get a key"; nothing wraps at 320 pixels. Revealing inside the sheet works the same and the timer keeps running if you close it. Escape closes the sheet and focus goes back to the menu button.

Yes. The bar mirrors and the dividers stay between the cells. The key and the wordmark always read left to right, as code and artwork do. Wrap the block in your direction provider (the catalog's DirectionProvider) so the sheet follows the page.

The copy button's icon swaps for a check and the sheet slides down; revealing and re-masking are instant swaps, not animations. With reduced motion the sheet appears without sliding and nothing else changes.