@suprsonic/react

React components for integrating SuprSonic blog content into your applications.

Installation

npm install @suprsonic/react
# or
yarn add @suprsonic/react
# or
pnpm add @suprsonic/react

Quick Start

1. Get Your API Key

First, you'll need to generate an API key from your SuprSonic dashboard:

1. Log into your SuprSonic account
2. Go to Settings → API Keys
3. Generate a new API key
4. Copy the key (it starts with sk_)

2. Basic Blog Integration

import { SuprSonicBlog } from '@suprsonic/react';
import '@suprsonic/react/styles/default.css';

function MyBlog() {
  return (
    <SuprSonicBlog 
      apiKey="sk_your_api_key_here"
      showSearch={true}
      showTags={true}
      articlesPerPage={10}
    />
  );
}

3. Single Article View

import { SuprSonicArticle } from '@suprsonic/react';
import '@suprsonic/react/styles/default.css';

function ArticlePage({ slug }: { slug: string }) {
  return (
    <SuprSonicArticle 
      apiKey="sk_your_api_key_here"
      slug={slug}
      showRelatedArticles={true}
    />
  );
}

Components

SuprSonicBlog

The main blog listing component with search, filtering, and pagination.

Props:

SuprSonicArticle

Single article component with full content and related articles.

Props:

Styling

Default Styles

Import the default CSS for basic styling:

import '@suprsonic/react/styles/default.css';

Custom Styling

You can override styles by targeting the CSS classes:

.suprsonic-blog {
  /* Blog container */
}

.suprsonic-article-card {
  /* Individual article cards */
}

.suprsonic-search {
  /* Search component */
}

.suprsonic-tags {
  /* Tag filter component */
}

.suprsonic-pagination {
  /* Pagination component */
}

TypeScript Support

This package includes TypeScript definitions. All props are fully typed:

import type { 
  SuprSonicBlogProps, 
  SuprSonicArticleProps, 
  Article 
} from '@suprsonic/react';

Environment Setup

For local development, you can override the API URL:

<SuprSonicBlog 
  apiKey="sk_your_api_key_here"
  baseUrl="http://localhost:3000/api/v1"  // For local development
/>

Examples

Check out the complete examples in the /examples directory:

• Next.js Basic: Complete integration example with Next.js App Router
• React Vite: Minimal React + Vite setup

API Authentication

The components use your API key to authenticate requests. The API key:

• Identifies your account automatically
• Provides access only to your published content
• Can be generated and revoked from your dashboard
• Should be kept secure (use environment variables in production)

Production Deployment

For production deployments:

1. Store your API key as an environment variable
2. Use the default production API URL (no baseUrl needed)
3. Implement proper error boundaries for robustness

// Production setup
<SuprSonicBlog 
  apiKey={process.env.NEXT_PUBLIC_SUPRSONIC_API_KEY}
/>

Support

• Documentation
• API Reference
• Support