react-beehiiv v0.1.0

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

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.