React Integration

Integrate Premonize with your React application.

Installation

npm install axios
# or
yarn add axios

Waitlist Hook

// hooks/usePremonize.js
import { useState } from 'react';
import axios from 'axios';

const API_URL = 'https://yourproject.premonize.com/api';

export function useWaitlist() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [subscriber, setSubscriber] = useState(null);

  const subscribe = async (email, name = null, referralCode = null) => {
    setLoading(true);
    setError(null);

    try {
      const { data } = await axios.post(`${API_URL}/waitlist/submit`, {
        email,
        name,
        referral_code: referralCode,
      });

      setSubscriber(data);
      return data;
    } catch (err) {
      setError(err.response?.data?.message || 'An error occurred');
      throw err;
    } finally {
      setLoading(false);
    }
  };

  return { subscribe, loading, error, subscriber };
}

Waitlist Component

// components/WaitlistForm.jsx
import React, { useState } from 'react';
import { useWaitlist } from '../hooks/usePremonize';

function WaitlistForm() {
  const [email, setEmail] = useState('');
  const { subscribe, loading, error, subscriber } = useWaitlist();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const urlParams = new URLSearchParams(window.location.search);
    const ref = urlParams.get('ref');

    await subscribe(email, null, ref);
  };

  if (subscriber) {
    return (
      

        
You're on the list!
        
Position: #{subscriber.position}
        
Share your link to move up:
         e.target.select()}
        />
      
    );
  }

  return (
    

       setEmail(e.target.value)}
        placeholder="Enter your email"
        required
      />
      
        {loading ? 'Joining...' : 'Join Waitlist'}
      
      {error && 
{error}
}
    
  );
}

export default WaitlistForm;

Changelog Component

// components/Changelog.jsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function Changelog({ projectSlug }) {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios
      .get(`https://${projectSlug}.premonize.com/api/changelog/posts/${projectSlug}`)
      .then(({ data }) => setPosts(data.posts))
      .finally(() => setLoading(false));
  }, [projectSlug]);

  if (loading) return 
Loading...
;

  return (
    

      {posts.map((post) => (
        

          {post.type}
          
{post.title}
          {new Date(post.published_at).toLocaleDateString()}
          

        
      ))}
    
  );
}

export default Changelog;

Styling

/* styles/waitlist.css */
.success-message {
  text-align: center;
  padding: 2rem;
  background: #f0fdf4;
  border-radius: 12px;
}

.type-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.type-badge.new { background: #dcfce7; color: #16a34a; }
.type-badge.improvement { background: #dbeafe; color: #2563eb; }
.type-badge.fix { background: #fef3c7; color: #d97706; }