Using React/NextJS

A quick guide on how to integrate Mailik within a React/NextJS application.

Before you start:

  • Navigate to Mailik and create a free account on Mailik.
  • Create a project.
  • Copy generated public key.
  • Install Mailik SDK.

Create a form

Now you need to set up a form, which if completed and submitted will trigger an email sent by your site to the address specified in the Mailik dashboard.

import Mailik from "@mailik/sdk";
import React, { useState } from "react";

const MainPage = () => {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  // Sending function
  const send = async () => {
    if (email && message) {
      const mailikResult = await Mailik("YOUR-PUBLIC-KEY-HERE").send({
        body: message,
        replyTo: email,
        subject: "Form from my Website",
      });
    }
  };

  return (
    <>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button>Send</button>
    </>
  );
};

export default MainPage;

After setting this up it will send the emails to the owner of the project that you have set up in Mailik panel.