wolves-react-client 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@
2
2
  * React SDK Metadata
3
3
  * This file defines the SDK version and type for the Wolves React SDK
4
4
  */
5
- export declare const REACT_SDK_VERSION = "1.0.3";
5
+ export declare const REACT_SDK_VERSION = "1.0.4";
6
6
  export declare const REACT_SDK_TYPE = "wolves-react-client";
7
7
  /**
8
8
  * Get React SDK metadata to override the JS SDK metadata
package/dist/metadata.js CHANGED
@@ -5,7 +5,7 @@
5
5
  */
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.getReactSDKMetadata = exports.REACT_SDK_TYPE = exports.REACT_SDK_VERSION = void 0;
8
- exports.REACT_SDK_VERSION = '1.0.3';
8
+ exports.REACT_SDK_VERSION = '1.0.4';
9
9
  exports.REACT_SDK_TYPE = 'wolves-react-client';
10
10
  /**
11
11
  * Get React SDK metadata to override the JS SDK metadata
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wolves-react-client",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "React SDK for Wolves A/B Testing Platform",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -20,8 +20,7 @@
20
20
  "test": "jest",
21
21
  "lint": "eslint src --ext .ts,.tsx",
22
22
  "format": "prettier --write \"src/**/*.{ts,tsx}\"",
23
- "prepublishOnly": "node scripts/hide-readme.js && npm run build",
24
- "postpublish": "node scripts/restore-readme.js"
23
+ "prepublishOnly": "npm run build"
25
24
  },
26
25
  "peerDependencies": {
27
26
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
package/README.md DELETED
@@ -1,367 +0,0 @@
1
- # Wolves React Client SDK
2
-
3
- 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.
4
-
5
- ## Features
6
-
7
- - 🎣 **React Hooks** - `useExperiment`, `useWolvesClient`, `useWolvesEvent`
8
- - ⚡ **Fast Initialization** - Async and sync initialization modes with caching
9
- - 🔄 **Automatic Exposure Logging** - Experiments automatically log exposures
10
- - 📦 **TypeScript Support** - Full TypeScript type definitions
11
- - 🌐 **SSR Compatible** - Works with Next.js and other SSR frameworks
12
- - 🎯 **Zero Config** - Works out of the box with sensible defaults
13
-
14
- ## Installation
15
-
16
- ```bash
17
- npm install wolves-react-client wolves-js-client react
18
- ```
19
-
20
- or with yarn:
21
-
22
- ```bash
23
- yarn add wolves-react-client wolves-js-client react
24
- ```
25
-
26
- ## Quick Start
27
-
28
- ### 1. Wrap your app with WolvesProvider
29
-
30
- ```tsx
31
- import { WolvesProvider } from 'wolves-react-client';
32
-
33
- function App() {
34
- const user = {
35
- userID: 'user-123',
36
- email: 'user@example.com',
37
- };
38
-
39
- return (
40
- <WolvesProvider sdkKey="your-sdk-key" user={user}>
41
- <YourApp />
42
- </WolvesProvider>
43
- );
44
- }
45
- ```
46
-
47
- ### 2. Use experiments in your components
48
-
49
- ```tsx
50
- import { useExperiment } from 'wolves-react-client';
51
-
52
- function FeatureComponent() {
53
- const experiment = useExperiment('my-experiment');
54
-
55
- const buttonColor = experiment.get('button_color', 'blue');
56
- const buttonText = experiment.get('button_text', 'Click Me');
57
-
58
- return (
59
- <button style={{ backgroundColor: buttonColor }}>
60
- {buttonText}
61
- </button>
62
- );
63
- }
64
- ```
65
-
66
- ### 3. Log custom events
67
-
68
- ```tsx
69
- import { useWolvesEvent } from 'wolves-react-client';
70
-
71
- function CheckoutButton() {
72
- const { logEvent } = useWolvesEvent();
73
-
74
- const handleCheckout = () => {
75
- logEvent('checkout_completed', 99.99, {
76
- currency: 'USD',
77
- items: '3',
78
- });
79
- };
80
-
81
- return <button onClick={handleCheckout}>Checkout</button>;
82
- }
83
- ```
84
-
85
- ## API Reference
86
-
87
- ### WolvesProvider
88
-
89
- The root component that initializes the Wolves client and provides context to child components.
90
-
91
- #### Props
92
-
93
- | Prop | Type | Required | Description |
94
- |------|------|----------|-------------|
95
- | `sdkKey` | `string` | Yes | Your Wolves SDK key |
96
- | `user` | `WolvesUser` | Yes | User identification and attributes |
97
- | `children` | `React.ReactNode` | Yes | Child components |
98
- | `options` | `WolvesProviderOptions` | No | Configuration options |
99
- | `waitForInitialization` | `boolean` | No | Wait for init before rendering children |
100
- | `loadingComponent` | `React.ReactNode` | No | Component to show while loading |
101
-
102
- #### Example with Options
103
-
104
- ```tsx
105
- <WolvesProvider
106
- sdkKey="your-sdk-key"
107
- user={{ userID: 'user-123' }}
108
- options={{
109
- initMode: 'async',
110
- onInitialized: (details) => console.log('Initialized:', details),
111
- onError: (error) => console.error('Error:', error),
112
- }}
113
- waitForInitialization={true}
114
- loadingComponent={<LoadingSpinner />}
115
- >
116
- <App />
117
- </WolvesProvider>
118
- ```
119
-
120
- ### useExperiment
121
-
122
- Hook to access experiment configurations and automatically log exposures.
123
-
124
- ```tsx
125
- const experiment = useExperiment<T>(experimentName, options?);
126
- ```
127
-
128
- #### Parameters
129
-
130
- - `experimentName` (string): Name of the experiment
131
- - `options` (optional):
132
- - `skipExposure` (boolean): Skip automatic exposure logging
133
- - `defaultValue` (T): Default value if experiment not found
134
-
135
- #### Returns
136
-
137
- - `value` (T): The experiment configuration value
138
- - `groupName` (string | null): The assigned group/variant
139
- - `experimentID` (string): The experiment ID
140
- - `get<K>(key, defaultValue)`: Get a specific parameter
141
- - `isLoading` (boolean): Whether client is still loading
142
-
143
- #### Example
144
-
145
- ```tsx
146
- function MyComponent() {
147
- const experiment = useExperiment('button-test', {
148
- defaultValue: { color: 'blue', text: 'Click' }
149
- });
150
-
151
- if (experiment.isLoading) {
152
- return <div>Loading...</div>;
153
- }
154
-
155
- return (
156
- <div>
157
- <p>Group: {experiment.groupName}</p>
158
- <button style={{ color: experiment.get('color', 'blue') }}>
159
- {experiment.get('text', 'Click')}
160
- </button>
161
- </div>
162
- );
163
- }
164
- ```
165
-
166
- ### useWolvesClient
167
-
168
- Hook to access the Wolves client instance and initialization state.
169
-
170
- ```tsx
171
- const { client, isInitialized, isLoading, error, updateUser } = useWolvesClient();
172
- ```
173
-
174
- #### Returns
175
-
176
- - `client` (WolvesClient | null): The client instance
177
- - `isInitialized` (boolean): Whether initialization completed
178
- - `isLoading` (boolean): Whether currently loading
179
- - `initializationDetails` (WolvesUpdateDetails | null): Init details
180
- - `error` (Error | null): Any initialization error
181
- - `updateUser` (function): Function to update the current user
182
-
183
- ### useWolvesEvent
184
-
185
- Hook to log custom events.
186
-
187
- ```tsx
188
- const { logEvent } = useWolvesEvent();
189
- ```
190
-
191
- #### Returns
192
-
193
- - `logEvent(eventName, value?, metadata?)`: Function to log events
194
- - `eventName` (string): Event name
195
- - `value` (string | number, optional): Event value
196
- - `metadata` (Record<string, string>, optional): Event metadata
197
-
198
- #### Example
199
-
200
- ```tsx
201
- function PurchaseButton() {
202
- const { logEvent } = useWolvesEvent();
203
-
204
- const handlePurchase = () => {
205
- logEvent('purchase', 49.99, {
206
- product_id: 'abc123',
207
- category: 'electronics'
208
- });
209
- };
210
-
211
- return <button onClick={handlePurchase}>Buy Now</button>;
212
- }
213
- ```
214
-
215
- ### useWolvesInitialization
216
-
217
- Hook to monitor initialization status.
218
-
219
- ```tsx
220
- const { isLoading, isReady, loadingStatus, error, details } = useWolvesInitialization();
221
- ```
222
-
223
- ## Initialization Modes
224
-
225
- ### Async Mode (Default)
226
-
227
- Loads from cache first (if available), then fetches from network. Waits for network response before completing initialization.
228
-
229
- ```tsx
230
- <WolvesProvider
231
- sdkKey="your-sdk-key"
232
- user={user}
233
- options={{ initMode: 'async' }}
234
- >
235
- <App />
236
- </WolvesProvider>
237
- ```
238
-
239
- ### Sync Mode
240
-
241
- Immediately loads from cache and starts rendering. Fetches from network in the background to update cache for next session.
242
-
243
- ```tsx
244
- <WolvesProvider
245
- sdkKey="your-sdk-key"
246
- user={user}
247
- options={{
248
- initMode: 'sync',
249
- syncOptions: {
250
- disableBackgroundCacheRefresh: false
251
- }
252
- }}
253
- >
254
- <App />
255
- </WolvesProvider>
256
- ```
257
-
258
- ## Server-Side Rendering (SSR)
259
-
260
- The SDK is SSR-compatible and works with Next.js and other SSR frameworks.
261
-
262
- ### Next.js App Router Example
263
-
264
- ```tsx
265
- // app/layout.tsx
266
- 'use client';
267
-
268
- import { WolvesProvider } from 'wolves-react-client';
269
-
270
- export default function RootLayout({ children }) {
271
- return (
272
- <html>
273
- <body>
274
- <WolvesProvider
275
- sdkKey={process.env.NEXT_PUBLIC_WOLVES_SDK_KEY!}
276
- user={{ userID: 'user-123' }}
277
- >
278
- {children}
279
- </WolvesProvider>
280
- </body>
281
- </html>
282
- );
283
- }
284
- ```
285
-
286
- ### Next.js Pages Router Example
287
-
288
- ```tsx
289
- // pages/_app.tsx
290
- import { WolvesProvider } from 'wolves-react-client';
291
-
292
- function MyApp({ Component, pageProps }) {
293
- return (
294
- <WolvesProvider
295
- sdkKey={process.env.NEXT_PUBLIC_WOLVES_SDK_KEY!}
296
- user={{ userID: 'user-123' }}
297
- >
298
- <Component {...pageProps} />
299
- </WolvesProvider>
300
- );
301
- }
302
-
303
- export default MyApp;
304
- ```
305
-
306
- ## TypeScript
307
-
308
- The SDK is written in TypeScript and provides full type safety.
309
-
310
- ```tsx
311
- interface ButtonExperiment {
312
- color: string;
313
- text: string;
314
- size: 'small' | 'medium' | 'large';
315
- }
316
-
317
- function MyButton() {
318
- const experiment = useExperiment<ButtonExperiment>('button-test');
319
-
320
- // Fully typed!
321
- const color = experiment.get('color', 'blue');
322
- const size = experiment.get('size', 'medium');
323
-
324
- return <button>{experiment.value.text}</button>;
325
- }
326
- ```
327
-
328
- ## Best Practices
329
-
330
- 1. **Initialize Once**: Place `WolvesProvider` at the root of your app, not in individual components
331
- 2. **Memoize User**: Use `useMemo` for the user object to prevent unnecessary re-initializations
332
- 3. **Handle Loading States**: Check `isLoading` before rendering experiment-dependent UI
333
- 4. **Use Default Values**: Always provide default values for experiment parameters
334
- 5. **Log Meaningful Events**: Use descriptive event names and include relevant metadata
335
-
336
- ## Troubleshooting
337
-
338
- ### Provider Error
339
-
340
- If you see "useWolvesClient must be used within WolvesProvider", ensure that your component is a child of `WolvesProvider`.
341
-
342
- ### SSR Errors
343
-
344
- The SDK automatically detects SSR environments and skips initialization on the server. Make sure to use `'use client'` directive in Next.js App Router.
345
-
346
- ### Experiments Not Loading
347
-
348
- - Verify your SDK key is correct
349
- - Check network requests in browser DevTools
350
- - Ensure the experiment exists in your Wolves dashboard
351
- - Check for initialization errors using `useWolvesClient().error`
352
-
353
- ## Examples
354
-
355
- See the `examples/` directory for complete working examples:
356
-
357
- - `basic-usage/` - Simple React app example
358
- - `nextjs-ssr/` - Next.js with SSR support
359
- - `typescript-example/` - TypeScript with full type safety
360
-
361
- ## License
362
-
363
- ISC
364
-
365
- ## Support
366
-
367
- For issues and questions, please open an issue on GitHub.