@posthog/react 1.10.1 → 1.10.2

package/README.md

@@ -1,204 +1,12 @@
-# @posthog/react
+# PostHog React package
 
-React components and hooks for PostHog analytics integration.
+Please see the main [PostHog docs](https://posthog.com/docs).
 
-[SEE FULL DOCS](https://posthog.com/docs/libraries/react)
+SDK usage examples and code snippets live in the official documentation so they stay up to date.
 
-## Installation
+## Documentation
 
-```bash
-npm install @posthog/react posthog-js
-```
-
-## Usage
-
-### Setting up the Provider
-
-Wrap your application with `PostHogProvider` to make the PostHog client available throughout your app:
-
-```tsx
-import { PostHogProvider } from '@posthog/react'
-
-function App() {
-    return (
-        <PostHogProvider apiKey="<YOUR_PROJECT_API_KEY>" options={{ api_host: 'https://us.i.posthog.com' }}>
-            <YourApp />
-        </PostHogProvider>
-    )
-}
-```
-
-Or pass an existing PostHog client instance:
-
-```tsx
-import posthog from 'posthog-js'
-import { PostHogProvider } from '@posthog/react'
-
-// Initialize your client
-posthog.init('<YOUR_PROJECT_API_KEY>', { api_host: 'https://us.i.posthog.com' })
-
-function App() {
-    return (
-        <PostHogProvider client={posthog}>
-            <YourApp />
-        </PostHogProvider>
-    )
-}
-```
-
-### Hooks
-
-#### usePostHog
-
-Access the PostHog client instance to capture events, identify users, etc.
-
-```tsx
-import { usePostHog } from '@posthog/react'
-
-function MyComponent() {
-    const posthog = usePostHog()
-
-    const handleClick = () => {
-        posthog.capture('button_clicked', { button_name: 'signup' })
-    }
-
-    return <button onClick={handleClick}>Sign Up</button>
-}
-```
-
-#### useFeatureFlagEnabled
-
-Check if a feature flag is enabled for the current user.
-
-```tsx
-import { useFeatureFlagEnabled } from '@posthog/react'
-
-function MyComponent() {
-    const isEnabled = useFeatureFlagEnabled('new-feature')
-
-    if (isEnabled) {
-        return <NewFeature />
-    }
-    return <OldFeature />
-}
-```
-
-By default the hook returns `boolean | undefined`, where `undefined` means the flags haven't loaded yet or the flag is absent. Pass a `defaultValue` to use instead of `undefined` in those cases — the return type then narrows to `boolean`:
-
-```tsx
-// false until proven enabled
-const isEnabled = useFeatureFlagEnabled('new-feature', false)
-```
-
-#### useFeatureFlagVariantKey
-
-Get the variant key for a multivariate feature flag.
-
-```tsx
-import { useFeatureFlagVariantKey } from '@posthog/react'
-
-function MyComponent() {
-    const variant = useFeatureFlagVariantKey('experiment-flag')
-
-    if (variant === 'control') {
-        return <ControlVariant />
-    }
-    if (variant === 'test') {
-        return <TestVariant />
-    }
-    return null
-}
-```
-
-#### useFeatureFlagPayload
-
-Get the payload associated with a feature flag.
-
-```tsx
-import { useFeatureFlagPayload } from '@posthog/react'
-
-function MyComponent() {
-    const payload = useFeatureFlagPayload('feature-with-payload')
-
-    return <div>Config: {JSON.stringify(payload)}</div>
-}
-```
-
-#### useActiveFeatureFlags
-
-Get all active feature flags for the current user.
-
-```tsx
-import { useActiveFeatureFlags } from '@posthog/react'
-
-function MyComponent() {
-    const activeFlags = useActiveFeatureFlags()
-
-    return (
-        <ul>
-            {activeFlags?.map((flag) => (
-                <li key={flag}>{flag}</li>
-            ))}
-        </ul>
-    )
-}
-```
-
-### Components
-
-#### PostHogFeature
-
-A component that renders content based on a feature flag's value. Automatically tracks feature views and interactions.
-
-```tsx
-import { PostHogFeature } from '@posthog/react'
-
-function MyComponent() {
-    return (
-        <PostHogFeature flag="new-cta" fallback={<OldButton />}>
-            <NewButton />
-        </PostHogFeature>
-    )
-}
-
-// With variant matching
-function MyComponent() {
-    return (
-        <PostHogFeature flag="experiment" match="test" fallback={<ControlVersion />}>
-            <TestVersion />
-        </PostHogFeature>
-    )
-}
-
-// With payload as render function
-function MyComponent() {
-    return (
-        <PostHogFeature flag="banner-config">
-            {(payload) => <Banner title={payload.title} color={payload.color} />}
-        </PostHogFeature>
-    )
-}
-```
-
-#### PostHogErrorBoundary
-
-An error boundary that captures React errors and reports them to PostHog.
-
-```tsx
-import { PostHogErrorBoundary } from '@posthog/react'
-
-function App() {
-    return (
-        <PostHogProvider apiKey="<YOUR_PROJECT_API_KEY>">
-            <PostHogErrorBoundary>
-                <YourApp />
-            </PostHogErrorBoundary>
-        </PostHogProvider>
-    )
-}
-```
-
-Please see the main [PostHog docs](https://www.posthog.com/docs).
+- [React library docs](https://posthog.com/docs/libraries/react)
 
 ## Questions?
 

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@posthog/react",
-  "version": "1.10.1",
+  "version": "1.10.2",
+  "bugs": {
+    "url": "https://github.com/PostHog/posthog-js/issues"
+  },
   "description": "Provides components and hooks for React integrations of PostHog.",
   "repository": {
     "type": "git",
@@ -51,7 +54,7 @@
     "tslib": "^2.5.0",
     "typescript": "5.8.2",
     "@posthog-tooling/rollup-utils": "1.1.1",
-    "posthog-js": "1.383.2"
+    "posthog-js": "^1.386.7"
   },
   "scripts": {
     "clean": "rimraf dist",