Left Right Install Snippet CTA Block for React

Edit DIFF and FILE at the top of the file. The diff is written like a unified diff, one line per line: start a line with + to add it, - to remove it, or a space to leave it as context. The +1 and −1 counts in the window's header are worked out from those signs, so they always match.

It's our Diff Text. Once the window is a quarter in view, the removed line tints and is struck through, then the added line slides in, all in CSS, and it plays once. The finished diff stays on screen. With reduced motion on, it is simply there from the start, and the headline and the buttons appear in place instead of fading up.

The window is a figure named "Change to package.json". The removed line is a del element and the added line an ins element, each read with "Removed" or "Added" before it, and the header's counts read "+1 line added" and "−1 line removed". The code area is in the tab order with a visible focus ring so a keyboard can scroll a wide line.

Both are links (href="#"): point Get started at your quick start and Read the docs at your documentation. Each button renders the link it's given with render, with nativeButton={false}.

From the lg breakpoint the text and the window sit side by side, split by a solid divider that runs up to the top rule. Below it they stack, the window after the text with a hairline between. Lines in the window never wrap: a wide one scrolls inside the window, never the page.