Buttondown logo

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mantine Buttondown Example</title>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/@mantine/core@7.3.0/dist/index.umd.js"></script>
    <script src="https://unpkg.com/@mantine/form@7.3.0/dist/index.umd.js"></script>
    <script src="https://unpkg.com/@mantine/hooks@7.3.0/dist/index.umd.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@mantine/core@7.3.0/styles.css" />
  </head>
  <body>
    <div id="root" style="max-width: 400px; margin: 50px auto; padding: 20px;"></div>

    <script type="text/babel">
      const { Button, TextInput, MantineProvider } = window.MantineCore;
      const { useForm, isEmail, hasLength } = window.MantineForm;

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

        return (
          <form
            action="https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME"
            method="POST"
          >
            <TextInput
              {...form.getInputProps("name")}
              key={form.key("name")}
              name="name"
              label="Name"
              placeholder="Name"
            />
            <TextInput
              {...form.getInputProps("email")}
              key={form.key("email")}
              name="email"
              mt="md"
              label="Email"
              placeholder="Email"
              required
            />
            <Button type="submit" mt="md" fullWidth>
              Submit
            </Button>
          </form>
        );
      }

      function App() {
        return (
          <MantineProvider>
            <Demo />
          </MantineProvider>
        );
      }

      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </body>
</html>