Headless UI denken

Komponenten, die keine Schnittstelle haben…

Die Philosophie des Kopflosen

Webkomponenten bestehen aus zwei Dingen, Schnittstelle und Logik, um die Schnittstelle zu steuern.

Die Trennung der Logik von der Schnittstelle ist die Kernphilosophie von Headless.

Es ermöglicht uns, hochflexible, adaptive Webkomponenten zu erstellen, die über UI-Bibliotheken hinweg funktionieren können.

Beispiel – Eine eigenständige Umschaltfläche

Wir werden React Hooks verwenden , um den Umschaltknopf zu bauen.

Um die Schaltfläche zu erstellen, benötigen wir einen Status , der anzeigt, ob die Schaltfläche gedrückt ist oder nicht, und einen Ereignishandler, um den Status beim Klicken umzuschalten .

Typendefinition

type ButtonPropsGetter = () => {
  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
  "aria-pressed": "true" | "false";
};

type StateGetter = () => boolean;

type ToggleButtonGetters = {
  getButtonProps: ButtonPropsGetter;
  getState: StateGetter;
};

const useToggleButton = (): ToggleButtonGetters => {
  const [status, setStatus] = useState(false);

  const onClick = () => {
    setStatus((prev) => !prev);
  };

  const getButtonProps: ButtonPropsGetter = () => {
    return { onClick, "aria-pressed": status ? "true" : "false" };
  };

  const getState: StateGetter = () => status;

  return { getButtonProps, getState };
};

Verbrauch

import useToggleButton from "./useToggleButton";

const App: FC = () => {
  const { getButtonProps, getState } = useToggleButton();
  const status = getState();

  return (
    <div>
      <h1>Hello World!</h1>
      {/* We can replace this button with any button */}
      <button {...getButtonProps()}>{status ? "ON" : "OFF"}</button>
    </div>
  );
}

Beliebte kopflose Bibliotheken

• Tanstack-Tabelle
• Dropzone reagieren
• Herunterschalten