Encapsulation

Keeping implementation details within a component.

<Dropdown label="…" />

public API — the only thing callers can see

html

<div class="enc">
  <p class="enc__title">&lt;Dropdown label=&quot;&hellip;&quot; /&gt;</p>
  <p class="enc__sub">public API &mdash; the only thing callers can see</p>
  
</div>
<style>
.enc { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; border: 2px solid #24143020; }
.enc__title { margin: 0 0 4px; font: 12px ui-monospace, monospace; font-weight: 700; }
.enc__sub { margin: 0; font-size: 11px; color: #24143099; }
.enc__internal { margin-top: 14px; padding: 12px; border: 2px dashed; border-radius: 8px; background: #24143008; }
.enc__internal-title { margin: 0 0 8px; font-size: 10px; color: #24143099; text-transform: uppercase; letter-spacing: .04em; }
.enc__internal code { display: block; font: 11px ui-monospace, monospace; margin-bottom: 4px; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border border-2 border-[#24143020]">
  <p class="m-0 mb-1 font-mono text-xs font-bold">&lt;Dropdown label=&quot;&hellip;&quot; /&gt;</p>
  <p class="m-0 text-[11px] text-[#24143099]">public API &mdash; the only thing callers can see</p>
  
</div>

react

export function Encapsulation({
  componentName = "Dropdown",
  publicProp = "label",
  revealInternals = false,
  accent = "#E8A020",
}) {
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box", border: "2px solid #24143020" }}>
      <p style={{ margin: "0 0 4px", fontFamily: "ui-monospace, monospace", fontSize: 12, fontWeight: 700 }}>&lt;{componentName} {publicProp}="&hellip;" /&gt;</p>
      <p style={{ margin: 0, fontSize: 11, color: "#24143099" }}>public API &mdash; the only thing callers can see</p>
      {revealInternals && (
        <div style={{ marginTop: 14, padding: 12, border: `2px dashed ${accent}`, borderRadius: 8, background: "#24143008" }}>
          <p style={{ margin: "0 0 8px", fontSize: 10, color: "#24143099", textTransform: "uppercase", letterSpacing: ".04em" }}>private, inside the component</p>
          <code style={{ display: "block", fontFamily: "ui-monospace, monospace", fontSize: 11, marginBottom: 4 }}>isOpen = false</code>
          <code style={{ display: "block", fontFamily: "ui-monospace, monospace", fontSize: 11, marginBottom: 4 }}>hoverIndex = -1</code>
          <code style={{ display: "block", fontFamily: "ui-monospace, monospace", fontSize: 11, marginBottom: 4 }}>listboxRef</code>
        </div>
      )}
    </div>
  );
}