wolves-react-client 1.0.2 → 1.0.4

package/dist/metadata.d.ts

@@ -2,7 +2,7 @@
  * React SDK Metadata
  * This file defines the SDK version and type for the Wolves React SDK
  */
-export declare const REACT_SDK_VERSION = "1.0.2";
+export declare const REACT_SDK_VERSION = "1.0.4";
 export declare const REACT_SDK_TYPE = "wolves-react-client";
 /**
  * Get React SDK metadata to override the JS SDK metadata

package/dist/metadata.js

@@ -5,7 +5,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getReactSDKMetadata = exports.REACT_SDK_TYPE = exports.REACT_SDK_VERSION = void 0;
-exports.REACT_SDK_VERSION = '1.0.2';
+exports.REACT_SDK_VERSION = '1.0.4';
 exports.REACT_SDK_TYPE = 'wolves-react-client';
 /**
  * Get React SDK metadata to override the JS SDK metadata

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wolves-react-client",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "React SDK for Wolves A/B Testing Platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/README.md

@@ -1,367 +0,0 @@
-# Wolves React Client SDK
-
-React SDK for the Wolves A/B Testing & Experimentation Platform. This library provides React hooks and components for easy integration of Wolves into your React applications.
-
-## Features
-
-- 🎣 **React Hooks** - `useExperiment`, `useWolvesClient`, `useWolvesEvent`
-- ⚡ **Fast Initialization** - Async and sync initialization modes with caching
-- 🔄 **Automatic Exposure Logging** - Experiments automatically log exposures
-- 📦 **TypeScript Support** - Full TypeScript type definitions
-- 🌐 **SSR Compatible** - Works with Next.js and other SSR frameworks
-- 🎯 **Zero Config** - Works out of the box with sensible defaults
-
-## Installation
-
-```bash
-npm install wolves-react-client wolves-js-client react
-```
-
-or with yarn:
-
-```bash
-yarn add wolves-react-client wolves-js-client react
-```
-
-## Quick Start
-
-### 1. Wrap your app with WolvesProvider
-
-```tsx
-import { WolvesProvider } from 'wolves-react-client';
-
-function App() {
-  const user = {
-    userID: 'user-123',
-    email: 'user@example.com',
-  };
-
-  return (
-    <WolvesProvider sdkKey="your-sdk-key" user={user}>
-      <YourApp />
-    </WolvesProvider>
-  );
-}
-```
-
-### 2. Use experiments in your components
-
-```tsx
-import { useExperiment } from 'wolves-react-client';
-
-function FeatureComponent() {
-  const experiment = useExperiment('my-experiment');
-  
-  const buttonColor = experiment.get('button_color', 'blue');
-  const buttonText = experiment.get('button_text', 'Click Me');
-
-  return (
-    <button style={{ backgroundColor: buttonColor }}>
-      {buttonText}
-    </button>
-  );
-}
-```
-
-### 3. Log custom events
-
-```tsx
-import { useWolvesEvent } from 'wolves-react-client';
-
-function CheckoutButton() {
-  const { logEvent } = useWolvesEvent();
-
-  const handleCheckout = () => {
-    logEvent('checkout_completed', 99.99, {
-      currency: 'USD',
-      items: '3',
-    });
-  };
-
-  return <button onClick={handleCheckout}>Checkout</button>;
-}
-```
-
-## API Reference
-
-### WolvesProvider
-
-The root component that initializes the Wolves client and provides context to child components.
-
-#### Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `sdkKey` | `string` | Yes | Your Wolves SDK key |
-| `user` | `WolvesUser` | Yes | User identification and attributes |
-| `children` | `React.ReactNode` | Yes | Child components |
-| `options` | `WolvesProviderOptions` | No | Configuration options |
-| `waitForInitialization` | `boolean` | No | Wait for init before rendering children |
-| `loadingComponent` | `React.ReactNode` | No | Component to show while loading |
-
-#### Example with Options
-
-```tsx
-<WolvesProvider
-  sdkKey="your-sdk-key"
-  user={{ userID: 'user-123' }}
-  options={{
-    initMode: 'async',
-    onInitialized: (details) => console.log('Initialized:', details),
-    onError: (error) => console.error('Error:', error),
-  }}
-  waitForInitialization={true}
-  loadingComponent={<LoadingSpinner />}
->
-  <App />
-</WolvesProvider>
-```
-
-### useExperiment
-
-Hook to access experiment configurations and automatically log exposures.
-
-```tsx
-const experiment = useExperiment<T>(experimentName, options?);
-```
-
-#### Parameters
-
-- `experimentName` (string): Name of the experiment
-- `options` (optional):
-  - `skipExposure` (boolean): Skip automatic exposure logging
-  - `defaultValue` (T): Default value if experiment not found
-
-#### Returns
-
-- `value` (T): The experiment configuration value
-- `groupName` (string | null): The assigned group/variant
-- `experimentID` (string): The experiment ID
-- `get<K>(key, defaultValue)`: Get a specific parameter
-- `isLoading` (boolean): Whether client is still loading
-
-#### Example
-
-```tsx
-function MyComponent() {
-  const experiment = useExperiment('button-test', {
-    defaultValue: { color: 'blue', text: 'Click' }
-  });
-
-  if (experiment.isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div>
-      <p>Group: {experiment.groupName}</p>
-      <button style={{ color: experiment.get('color', 'blue') }}>
-        {experiment.get('text', 'Click')}
-      </button>
-    </div>
-  );
-}
-```
-
-### useWolvesClient
-
-Hook to access the Wolves client instance and initialization state.
-
-```tsx
-const { client, isInitialized, isLoading, error, updateUser } = useWolvesClient();
-```
-
-#### Returns
-
-- `client` (WolvesClient | null): The client instance
-- `isInitialized` (boolean): Whether initialization completed
-- `isLoading` (boolean): Whether currently loading
-- `initializationDetails` (WolvesUpdateDetails | null): Init details
-- `error` (Error | null): Any initialization error
-- `updateUser` (function): Function to update the current user
-
-### useWolvesEvent
-
-Hook to log custom events.
-
-```tsx
-const { logEvent } = useWolvesEvent();
-```
-
-#### Returns
-
-- `logEvent(eventName, value?, metadata?)`: Function to log events
-  - `eventName` (string): Event name
-  - `value` (string | number, optional): Event value
-  - `metadata` (Record<string, string>, optional): Event metadata
-
-#### Example
-
-```tsx
-function PurchaseButton() {
-  const { logEvent } = useWolvesEvent();
-
-  const handlePurchase = () => {
-    logEvent('purchase', 49.99, {
-      product_id: 'abc123',
-      category: 'electronics'
-    });
-  };
-
-  return <button onClick={handlePurchase}>Buy Now</button>;
-}
-```
-
-### useWolvesInitialization
-
-Hook to monitor initialization status.
-
-```tsx
-const { isLoading, isReady, loadingStatus, error, details } = useWolvesInitialization();
-```
-
-## Initialization Modes
-
-### Async Mode (Default)
-
-Loads from cache first (if available), then fetches from network. Waits for network response before completing initialization.
-
-```tsx
-<WolvesProvider
-  sdkKey="your-sdk-key"
-  user={user}
-  options={{ initMode: 'async' }}
->
-  <App />
-</WolvesProvider>
-```
-
-### Sync Mode
-
-Immediately loads from cache and starts rendering. Fetches from network in the background to update cache for next session.
-
-```tsx
-<WolvesProvider
-  sdkKey="your-sdk-key"
-  user={user}
-  options={{ 
-    initMode: 'sync',
-    syncOptions: {
-      disableBackgroundCacheRefresh: false
-    }
-  }}
->
-  <App />
-</WolvesProvider>
-```
-
-## Server-Side Rendering (SSR)
-
-The SDK is SSR-compatible and works with Next.js and other SSR frameworks.
-
-### Next.js App Router Example
-
-```tsx
-// app/layout.tsx
-'use client';
-
-import { WolvesProvider } from 'wolves-react-client';
-
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        <WolvesProvider
-          sdkKey={process.env.NEXT_PUBLIC_WOLVES_SDK_KEY!}
-          user={{ userID: 'user-123' }}
-        >
-          {children}
-        </WolvesProvider>
-      </body>
-    </html>
-  );
-}
-```
-
-### Next.js Pages Router Example
-
-```tsx
-// pages/_app.tsx
-import { WolvesProvider } from 'wolves-react-client';
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <WolvesProvider
-      sdkKey={process.env.NEXT_PUBLIC_WOLVES_SDK_KEY!}
-      user={{ userID: 'user-123' }}
-    >
-      <Component {...pageProps} />
-    </WolvesProvider>
-  );
-}
-
-export default MyApp;
-```
-
-## TypeScript
-
-The SDK is written in TypeScript and provides full type safety.
-
-```tsx
-interface ButtonExperiment {
-  color: string;
-  text: string;
-  size: 'small' | 'medium' | 'large';
-}
-
-function MyButton() {
-  const experiment = useExperiment<ButtonExperiment>('button-test');
-  
-  // Fully typed!
-  const color = experiment.get('color', 'blue');
-  const size = experiment.get('size', 'medium');
-  
-  return <button>{experiment.value.text}</button>;
-}
-```
-
-## Best Practices
-
-1. **Initialize Once**: Place `WolvesProvider` at the root of your app, not in individual components
-2. **Memoize User**: Use `useMemo` for the user object to prevent unnecessary re-initializations
-3. **Handle Loading States**: Check `isLoading` before rendering experiment-dependent UI
-4. **Use Default Values**: Always provide default values for experiment parameters
-5. **Log Meaningful Events**: Use descriptive event names and include relevant metadata
-
-## Troubleshooting
-
-### Provider Error
-
-If you see "useWolvesClient must be used within WolvesProvider", ensure that your component is a child of `WolvesProvider`.
-
-### SSR Errors
-
-The SDK automatically detects SSR environments and skips initialization on the server. Make sure to use `'use client'` directive in Next.js App Router.
-
-### Experiments Not Loading
-
-- Verify your SDK key is correct
-- Check network requests in browser DevTools
-- Ensure the experiment exists in your Wolves dashboard
-- Check for initialization errors using `useWolvesClient().error`
-
-## Examples
-
-See the `examples/` directory for complete working examples:
-
-- `basic-usage/` - Simple React app example
-- `nextjs-ssr/` - Next.js with SSR support
-- `typescript-example/` - TypeScript with full type safety
-
-## License
-
-ISC
-
-## Support
-
-For issues and questions, please open an issue on GitHub.