@limitry/react

React SDK for Limitry - hooks and components for React applications.

Installation

npm install @limitry/react

Note: @limitry/client is included as a dependency.

Quick Start

import { LimitryProvider, useLimits, useEvents } from '@limitry/react';

function App() {
  return (
    <LimitryProvider clientToken="your-client-token">
      <MyComponent />
    </LimitryProvider>
  );
}

function MyComponent() {
  const { checkLimits, data, isLoading, error } = useLimits();
  const { recordEvent } = useEvents();

  const handleAction = async () => {
    const result = await checkLimits();
    if (result.allowed) {
      // Proceed with the action
      console.log('Action allowed!');
      
      // Record the event
      await recordEvent({
        eventType: 'feature.used',
        values: { count: 1 }
      });
    } else {
      console.log('Limit exceeded');
    }
  };

  return (
    <div>
      {isLoading && <p>Checking...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && <p>Allowed: {data.allowed ? 'Yes' : 'No'}</p>}
      <button onClick={handleAction}>Perform Action</button>
    </div>
  );
}

Events Summary

import { useEvents } from '@limitry/react';
import { useEffect } from 'react';

function UsageDashboard() {
  const { getEventsSummary, summaryData, isLoading } = useEvents();

  useEffect(() => {
    getEventsSummary('day');
  }, [getEventsSummary]);

  if (isLoading) return <p>Loading...</p>;
  if (!summaryData) return null;

  return (
    <div>
      <h2>Today's Usage</h2>
      <p>Total Events: {summaryData.usage.totalEvents}</p>
      <p>Values: {JSON.stringify(summaryData.usage.values)}</p>
    </div>
  );
}

API

Provider

LimitryProvider

Wrap your app with this provider to use Limitry hooks.

<LimitryProvider clientToken="..." baseUrl="...">
  {children}
</LimitryProvider>

Hooks

useLimitryClient()

Returns the raw LimitryClient instance for advanced usage.

useLimits()

Hook for checking limits.

Returns:

• checkLimits(options?) - Check limits
• data - Latest check result
• error - Error if request failed
• isLoading - Loading state
• reset() - Reset state

useEvents()

Hook for event operations.

Returns:

• recordEvent(options) - Record an event
• getEventsSummary(period?) - Get events summary ('hour', 'day', 'week', 'month')
• recordData - Latest record result
• summaryData - Latest summary data
• error - Error if request failed
• isLoading - Loading state
• reset() - Reset state

License

Apache-2.0