IU pensando sem cabeça

Componentes que não possuem interface…

A filosofia dos sem cabeça

Os componentes da Web são feitos de duas coisas, interface e lógica para conduzir a interface.

Separar a lógica da interface é a filosofia central do headless.

Ele nos permite construir componentes da Web altamente flexíveis e adaptáveis ​​que podem funcionar em bibliotecas de interface do usuário.

Exemplo — um botão de alternância autônomo

Faremos uso de React Hooks para construir o botão de alternância.

Para construir o botão, o que precisamos é de um status para indicar se o botão está pressionado ou não e um manipulador de eventos para alternar o status ao clicar.

Definição de tipos

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

Consumo

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

Bibliotecas sem cabeça populares

• Tabela Tanstack
• Reagir Dropzone
• Redução de marcha