A custom reactJS component for making a http request when JavaScript is disabled on the browser.

HttpButton.tsx

import React from "react";
import Button from "./Button";
import type { ButtonProps } from "./Button";

import { useAuthTokenFromContext } from "../AuthProvider"; 

export const HttpButton = ({
  children,
  action,
  enctype = "application/x-www-form-urlencoded",
  method = "get",
  tokenType = "csrf",
  ...props }: {
   action: string,
   enctype?: "multipart/form-data" | "application/x-www-form-urlencoded",
   method: "post" | "get" | "put" | "delete" | "patch",
   tokenType: "csrf" | "link"
 } & ButtonProps) => {
  const token = useAuthTokenFromContext(tokenType);
  return (
    <form action={action} accept-charset="UTF-8" method={method !== "get" ? "post" : method} enctype={enctype} noValidate>
      {
      method !== "get" 
        ? <input type="hidden" name="_method" value={method} autocomplete="off">
        :  null
      }
      <input type="hidden" name="authenticity_token" value={token}>
      <input type="hidden" name="bot_honeypot" value="">
      <Button type="submit" class={className} {...props}>
        {children}
      </Button>
    </form>
  );
};