Skip to main content

Quickstart / React

React Quickstart

Build a cStar integration with React in under 5 minutes. This guide covers installation, setup, listing tickets, creating tickets, and subscribing to real-time events.

1. Install

npm install @cstar.help/react

2. Set Up the Client

providers.tsx 
// app/providers.tsx (or your root layout)
			import { CStarProvider } from '@cstar.help/react';
			
			export default function Providers({ children }) {
			  return (
			    <CStarProvider apiKey={process.env.NEXT_PUBLIC_CSTAR_KEY}>
			      {children}
			    </CStarProvider>
			  );
			}

3. Fetch Data

List open tickets with built-in loading and error states.

TicketList.tsx 
// components/TicketList.tsx
			import { useTickets } from '@cstar.help/react';
			
			export function TicketList() {
			  const { tickets, loading, error, refetch } = useTickets({
			    status: 'open'
			  });
			
			  if (loading) return <p>Loading tickets...</p>;
			  if (error) return <p>Error: {error.message}</p>;
			
			  return (
			    <div>
			      <h2>Open Tickets ({tickets.length})</h2>
			      {tickets.map(ticket => (
			        <div key={ticket.id}>
			          <h3>{ticket.title}</h3>
			          <span>{ticket.priority}</span>
			        </div>
			      ))}
			      <button onClick={refetch}>Refresh</button>
			    </div>
			  );
			}

4. Create a Resource

Create a new ticket from your application.

CreateTicketForm.tsx 
// components/CreateTicketForm.tsx
			import { useCStarClient } from '@cstar.help/react';
			import { useState } from 'react';
			
			export function CreateTicketForm() {
			  const cstar = useCStarClient();
			  const [title, setTitle] = useState('');
			
			  async function handleSubmit(e) {
			    e.preventDefault();
			    const ticket = await cstar.tickets.create({
			      title,
			      priority: 'normal'
			    });
			    console.log('Created:', ticket.id);
			  }
			
			  return (
			    <form onSubmit={handleSubmit}>
			      <input value={title} onChange={e => setTitle(e.target.value)} />
			      <button type="submit">Create Ticket</button>
			    </form>
			  );
			}

5. Real-Time Events

Subscribe to webhook events for real-time updates.

// hooks/useTicketEvents.ts
			import { useSubscription } from '@cstar.help/react';
			
			export function useTicketEvents() {
			  useSubscription('ticket.*', (event) => {
			    console.log('New event:', event.type);
			    // Auto-refetch or update local state
			  });
			}

What's Next?