Grain Analytics Web SDK

A lightweight, dependency-free TypeScript SDK for analytics and remote configuration management.

Features

• 🚀 Zero dependencies - ~6KB gzipped
• 📦 Automatic batching - Efficient event delivery
• 🔄 Retry logic - Reliable with exponential backoff
• 🎯 TypeScript first - Full type safety
• ⚙️ Remote Config - Dynamic app control without deployments
• ⚛️ React Hooks - Seamless React integration
• 📱 Cross-platform - Browser, Node.js, React Native

Installation

npm install @grainql/analytics-web

Quick Start

Vanilla JavaScript/TypeScript

import { createGrainAnalytics } from '@grainql/analytics-web';

const grain = createGrainAnalytics({
  tenantId: 'your-tenant-id'
});

// Track events
grain.track('page_viewed', { page: '/home' });

// Get remote config
const heroText = grain.getConfig('hero_text');

React

import { GrainProvider, useConfig, useTrack } from '@grainql/analytics-web/react';

function App() {
  return (
    <GrainProvider config={{ tenantId: 'your-tenant-id' }}>
      <HomePage />
    </GrainProvider>
  );
}

function HomePage() {
  const { value: heroText } = useConfig('hero_text');
  const track = useTrack();
  
  return (
    <div>
      <h1>{heroText || 'Welcome!'}</h1>
      <button onClick={() => track('cta_clicked')}>
        Get Started
      </button>
    </div>
  );
}

Documentation

For comprehensive guides, API reference, and examples, visit our documentation:

📚 Full Documentation

Key Topics

• Quick Start Guide - Get started in 5 minutes
• Event Tracking - Track user actions
• Remote Configuration - Dynamic app control
• React Hooks - React integration
• API Reference - Complete API docs
• Examples - Real-world examples

Key Concepts

Event Tracking

Track user actions with automatic batching and retry logic:

grain.track('button_clicked', { button: 'signup' });
await grain.trackPurchase({ orderId: '123', total: 99.99 });

Remote Configuration

Control your app dynamically without code deployments:

const featureEnabled = grain.getConfig('new_feature');
if (featureEnabled === 'true') {
  // Show feature
}

User Identification

Track users across sessions:

grain.setUserId('user_123');
await grain.setProperty({ plan: 'premium' });

More Examples

Check the examples directory for:

• Vanilla JavaScript usage
• React integration
• Next.js setup
• E-commerce tracking
• Authentication flows

Contributing

We welcome contributions! Please see our contributing guidelines for more details.

License

MIT © Grain Analytics

Support

• Documentation: docs.grainql.com
• Dashboard: grainql.com/dashboard
• Issues: GitHub Issues
• Email: support@grainql.com