Myślący bezgłowy interfejs użytkownika

Komponenty, które nie mają interfejsu…

Filozofia bezgłowego

Komponenty sieciowe składają się z dwóch rzeczy, interfejsu i logiki sterującej interfejsem.

Oddzielenie logiki od interfejsu jest podstawową filozofią headless.

Pozwala nam budować wysoce elastyczne, adaptacyjne komponenty sieciowe, które mogą działać w różnych bibliotekach interfejsu użytkownika.

Przykład — samodzielny przycisk przełączania

Będziemy używać React Hooks do zbudowania przycisku przełączania.

Aby zbudować przycisk, potrzebujemy statusu wskazującego, czy przycisk jest wciśnięty, czy nie, oraz procedury obsługi zdarzeń, która przełącza status po kliknięciu.

Definicja typów

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 };
};

Konsumpcja

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>
  );
}

Popularne biblioteki bezgłowe

• Stół Tanstack
• Strefa zrzutu reakcji
• Redukcja