asis

function ruler() {
  const ruler = document.createElement("div");

  ruler.style.cssText = `
position: absolute;
top: ${window.scrollY + window.innerHeight/2 - 20}px;
left: ${window.scrollX + window.innerWidth/2 - 20}px;
width: 40px;
height: 40px;
background: #ff00006e;

asis

import LibraryPen from "some-library";

const SecretNote = ({ pen }) => (
  <span>🕵️‍♀️{React.cloneElement(pen, { text: "this is a secret" })}🕵️‍♀️</span>
);

const AdaptedPen = ({ text }) => <LibraryPen write={text} />;

const App = () => <SecretNote pen={<AdaptedPen />} />;