Buttondown Documentation

Buttondown Documentation

© 2016–2024 Buttondown LLC.

TwitterDiscord GitHubLinkedInMastodonBlueskyFacebook

Integrating Mantine with Buttondown

Overview

Mantine is a React component library that lets you build web applications. You can add a subscription form to your newsletter to your Mantine application.

Getting started

To use the examples below, you'll need to install @mantine/core and @mantine/form:

pnpm install @mantine/core @mantine/form

You'll notice two things:

  1. We use "Uncontrolled mode" when building this form. This means that rather than storing form state within React proper, we manage state in a ref for performance reasons. This is not the biggest deal in the world either way, since this form is small, but it's still better.
  2. We do use mantine's built-in form validations, but Buttondown also has its own suite of validations that we use to ensure all incoming subscribers are valid.

Basic example

"use client";

import { Button, TextInput } from "@mantine/core";
import { hasLength, isEmail, useForm } from "@mantine/form";

export default function Demo() {
  const form = useForm({
    mode: "uncontrolled",
    initialValues: { name: "", email: "" },
    validate: {
      name: hasLength({ min: 3 }, "Must be at least 3 characters"),
      email: isEmail("Invalid email"),
    },
  });

  const handleSubmit = (
    values: typeof form.values,
    event: React.FormEvent | undefined,
  ) => {
    const data = new FormData();
    data.append("name", values.name);
    data.append("email", values.email);
    fetch("https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME", {
      method: "POST",
      body: data,
    }).then((response) => console.log(response));
  };

  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <TextInput
        {...form.getInputProps("name")}
        key={form.key("name")}
        label="Name"
        placeholder="Name"
      />
      <TextInput
        {...form.getInputProps("email")}
        key={form.key("email")}
        mt="md"
        label="Email"
        placeholder="Email"
      />
      <Button type="submit" mt="md">
        Submit
      </Button>
    </form>
  );
}

© 2016–2024 Buttondown LLC.

TwitterDiscord GitHubLinkedInMastodonBlueskyFacebook