react-beehiiv

Easily integrate Beehiiv newsletter in your React App.

• Utility functions like create and delete subscriptions from your forms.
• Form elements like Input and Subscribe Button.

How to integrate

1. Run npm install react-beehiiv from the root of your project.
2. Register for Beehiiv if you haven't already and get the API key and Publication ID by going to Settings -> Integrations -> API. Here you can create a new API key and copy the Publication ID from API V2
3. Create a beehiiv instance and start calling it's functions:

import { Beehiiv } from "react-beehiiv"; // import the package

const Component = () => {
	const subscribe = async () => {
    const beehiiv = new Beehiiv("your api key"); // initiate beehiiv;
		await beehiiv.create({
			email: "user email",
			publicationId: "your publication id"
		})
		 // rest of the logic
	}
}

For all available arguments accepted by subscribe please visit Beehiiv Documentation

Using Form Component from react-beehiiv

import { Beehiiv, BeehiivSubscribeForm } from "react-beehiiv"; // import the package
import { useState } from "react";

const Form = () => {
	const [email, setEmail] = useState("");
	const [subscribed, setSubscribed] = useState(false);
	
	const onValueChange = (e) => {
		setEmail(e.target.value);
	}
	
	const onSubmit = async () => {
    const beehiiv = new Beehiiv("your api key"); // initiate beehiiv;
		await beehiiv.create({
			email,
			publicationId: "your publication id"
		})
	}
	
	return (
		<BeehiivSubscribeForm
			onChange={onValueChange}
			value={email}
      onClick={onSubmit}
			/>
	)
}

For all available BeehiivSubscribeForm props, please check this table

Delete Subscription

import { Beehiiv } from "react-beehiiv";

const delete = async () => {
    const beehiiv = new Beehiiv("your api key"); // initiate beehiiv;
		await beehiiv.delete({
			subscriptionId: "user subscription id",
			publicationId: "your publication id"
		})
		 // rest of the logic
	}

For all available arguments accepted by delete please visit Beehiiv Documentation

Find Subscription

import { Beehiiv } from "react-beehiiv";

const index = async () => {
    const beehiiv = new Beehiiv("your api key"); // initiate beehiiv;
		const result = await beehiiv.index({
			email: "user email",
			publicationId: "your publication id"
		})
		return result;
	}

For all available arguments accepted by index please visit Beehiiv Documentation

Update Subscription

import { Beehiiv } from "react-beehiiv";

const update = async () => {
    const beehiiv = new Beehiiv("your api key"); // initiate beehiiv;
		const result = await beehiiv.update({
			subscriptionId: "user subscription id",
			publicationId: "your publication id"
		})
		return result;
	}

For all available arguments accepted by update please visit Beehiiv Documentation

BeehiivSubscribeForm Props

| Name | Type | Description | Required | | ---- | ---- | ----------- | -- | | placeholder | string | Placeholder text for the email input | no | | btnText | string | Text for the subscribe button | no | | color | string | Color of the form | no | | value | string | Current value of the email input | no | | onChange | (e: ChangeEvent<HTMLInputElement>) => void | Handler for email input changes | yes | onClick | () => void; | Click handler for the subscribe button | yes | formProps | ComponentPropsWithoutRef<"form"> | Additional props for the form element | no | | inputProps | Omit<ComponentPropsWithoutRef<"input">, "placeholder" | "value" | "onChange" | "type"> | Additional props for the email input element | no | | buttonProps | Omit<ComponentPropsWithoutRef<"button">, "onClick"> | Additional props for the subscribe button element | no |

Test Mode

Beehiiv has 2 servers: production and mock. If you want to test your integration first you can pass props for test set to true when initializing Beehiiv instance to use mock server: const beehiiv = new Beehiiv("your api key", true);

Made by Brijen Makwana and Webdecoded. This is not an official package from Beehiiv Software.