Chore/documentation and surveys change

README.md

@@ -1,12 +1,14 @@
-# vite-plugin-posthog
-
-## Description
-
-This is a monorepo that houses the package `vite-plugin-posthog`. This package is a Vite plugin that adds PostHog to your Vite project.
-
-A Package that adds PostHog to your Vite project. Compatible with any Vite app.
-
-- Extra support currently given to React (via hooks and components)
-- More support for Vue and Svelte coming soon
-
-[Read more about this package here](packages/vite-plugin-posthog/README.md)
+# vite-plugin-posthog
+
+## Description
+
+This is a monorepo that houses the package `vite-plugin-posthog`. This package is a Vite plugin that adds PostHog to your Vite project.
+
+A Package that adds PostHog to your Vite project. Compatible with any Vite app.
+
+- Extra support currently given to React (via hooks and components)
+- More support for Vue and Svelte coming soon
+
+## Documentation
+
+[Read more about this package here](packages/vite-plugin-posthog/README.md) or check out the [documentation](http://vite-posthog.tsotne.co.uk/).

apps/docs/pages/index.mdx

@@ -6,8 +6,6 @@ This is a plugin for vite that allows you to integrate with Posthog.
 
 Its based on the official [Javascript SDK](https://posthog.com/docs/libraries/js) and uses these under the hood.
 
-
-
 ## Advantages over the official JS SDK
 - Easy to get started, just add the plugin to your Vite config.
 - Easily turn off tracking in development mode

apps/docs/pages/react/_meta.json

@@ -6,5 +6,9 @@
     "feature-flags": {
         "title": "Feature Flags",
         "href": "/react/feature-flags"
+    },
+    "surveys": {
+        "title": "Surveys",
+        "href": "/react/surveys"
     }
   }

apps/docs/pages/react/core.mdx

@@ -21,7 +21,7 @@ export default function MyComponent() {
 `useVitePostHog` is a hook that returns a PostHog instance. You can use to interact with PostHog. 
 
 <Callout type="info" emoji="ℹ️">
-  It is a wrapper around the [PostHog JS library](https://posthog.com/docs/libraries/js), so you can use all the methods that the library provides.
+  It is a wrapper around the [PostHog JS library](https://posthog.com/docs/libraries/js), so you can use all everything that the library provides.
 </Callout>
 
 ## Idenitification example

apps/docs/pages/react/feature-flags.mdx

@@ -1,16 +1,178 @@
-import { Callout } from 'nextra/components'
+import { Callout, Steps } from 'nextra/components'
 
 # Feature Flags
 
-<Callout type="info" emoji="ℹ️">
-  Better docs coming soon
-</Callout>
 
+<Steps>
+### Create your feature flag
+
+Create your feature flag in PostHog. You can read up about this on their [official docs](https://posthog.com/docs/feature-flags/creating-feature-flags)
+
+### The code
+
+Use any of the hooks or components we provide below to safeguard features in your app based on the feature flag.
 
 | Hook/Component                     | Description                                                                                     |
 | ------------------------ | ----------------------------------------------------------------------------------------------- |
 | useFeatureFlagEnabled    | Returns a boolean indicating whether the feature flag is enabled.                               |
 | useFeatureFlagPayload    | Returns the payload of the feature flag.                                                        |
 | useFeatureFlagVariantKey | Returns the variant key of the feature flag.                                                    |
 | useActiveFeatureFlags    | Returns an array of active feature flags.                                                       |
-| PostHogFeature | A component that allows you to render different content based on whether a feature flag is enabled or not. |
+| PostHogFeature | A component that allows you to render different content based on whether a feature flag is enabled or not. |
+
+### Testing
+Testing your feature flag in your app. There are multiple methods for this, all of which are covered in the [official docs](https://posthog.com/docs/feature-flags/testing)
+</Steps>
+
+
+### Hooks and Components
+
+#### useFeatureFlagEnabled
+A hook that returns `true` if feature flag is enabled.
+
+```tsx
+import { useFeatureFlagEnabled } from 'vite-plugin-posthog/react'
+
+function App() {
+  const showWelcomeMessage = useFeatureFlagEnabled('flag-key')
+
+  return (
+    <div className="App">
+      {
+        showWelcomeMessage ? (
+          <div>
+            <h1>Welcome!</h1>
+            <p>Thanks for trying out our feature flags.</p>
+          </div>
+        ) : (
+          <div>
+            <h2>No welcome message</h2>
+            <p>Because the feature flag evaluated to false.</p>
+          </div>
+        )
+      }
+    </div>
+  );
+}
+
+export default App;
+```
+
+#### useFeatureFlagPayload
+
+A hook that returns the payload of a feature flag.
+
+```tsx
+import { useFeatureFlagPayload } from 'vite-plugin-posthog/react'
+
+function App() {
+  const payload = useFeatureFlagPayload('show-welcome-message')
+
+    return (
+                <>
+                {
+                    payload?.welcomeMessage ? (
+                        <div className="welcome-message">
+                            <h2>{payload?.welcomeTitle}</h2>
+                            <p>{payload.welcomeMessage}</p>
+                        </div>
+                    ) : <div>
+                        <h2>No welcome message</h2>
+                        <p>Because the feature flag evaluated to false.</p>
+                    </div>
+                }
+        </>
+    )
+}
+```
+
+#### useFeatureFlagVariantKey
+
+A hook that returns the variant key of a feature flag.
+
+```tsx
+import { useFeatureFlagVariantKey } from 'vite-plugin-posthog/react'
+
+function App() {
+  const variantKey = useFeatureFlagVariantKey('show-welcome-message')
+  let welcomeMessage = '' 
+  if (variantKey === 'variant-a') {
+    welcomeMessage = 'Welcome to the Alpha!'
+  } else if (variantKey === 'variant-b') {
+    welcomeMessage = 'Welcome to the Beta!'
+  }  
+
+  return (
+    <div className="App">
+      {
+        welcomeMessage ? (
+          <div>
+            <h1>{welcomeMessage}</h1>
+            <p>Thanks for trying out our feature flags.</p>
+          </div>
+        ) : (
+          <div>
+            <h2>No welcome message</h2>
+            <p>Because the feature flag evaluated to false.</p>
+          </div>
+        )
+      }
+    </div>
+  );
+}
+
+export default App;
+
+```
+
+
+#### useActiveFeatureFlags
+
+A hook that returns an array of active feature flags.
+
+```tsx
+
+import { useActiveFeatureFlags } from 'vite-plugin-posthog/react'
+
+function App() {
+  const activeFeatureFlags = useActiveFeatureFlags()
+
+  return (
+    <div className="App">
+      <h1>Active Feature Flags</h1>
+      <ul>
+        {activeFeatureFlags.map((flag) => (
+          <li key={flag.key}>
+            <strong>{flag.key}</strong> - {flag.name}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+```
+
+#### PostHogFeature
+
+The PostHogFeature component simplifies code by handling feature flag related logic.
+
+It also automatically captures metrics, like how many times a user interacts with this feature.
+
+```tsx
+
+import { PostHogFeature } from 'vite-plugin-posthog/react'
+
+function App() {
+
+    return (
+        <PostHogFeature flag='show-welcome-message' match={true}>
+            <div>
+                <h1>Hello</h1>
+                <p>Thanks for trying out our feature flags.</p>
+            </div>
+        </PostHogFeature>
+    )
+}
+
+```

apps/docs/pages/react/surveys.mdx

@@ -0,0 +1,76 @@
+import { Callout, Steps } from 'nextra/components'
+
+# Surveys
+
+Posthog also provides a way to create surveys and collect feedback from your users.
+
+
+<Steps>
+### Create your survey
+
+Create your survey in PostHog. You can read up about this on their [official docs](https://posthog.com/docs/surveys/creating-surveys)
+
+<Callout type="info" emoji="ℹ️">
+  If you are creating a `Popover` survey you can skip the next steps.
+</Callout>
+
+### Display your survey
+
+Use the `useGetActiveMatchingSurvey` hook to fetch your survey's data and display it in the app.
+
+The hook also returns helpful functions to handle the tracking of dismissing and completing the survey. 
+
+```tsx
+import { useState } from 'react';
+import { useGetActiveMatchingSurvey, useVitePostHog } from 'vite-plugin-posthog/react';
+
+const SurveyComponent = ({ surveyId }) => {
+  const posthog = useVitePostHog();
+  const { currentSurvey, surveyFound, isLoading, trackDismiss } = useGetActiveMatchingSurvey(surveyId);
+  const [show, setShow] = useState(true);
+
+  if (isLoading) {
+    return <div>Loading survey...</div>;
+  }
+
+  if (!surveyFound) {
+    return <div>No survey found.</div>;
+  }
+
+  if(!show) {
+    return null;
+  }
+
+  const handleSubmit = () => {
+    posthog?.capture("survey sent", {
+      $survey_id: surveyId,
+      $survey_response: // your response data
+    });
+  }
+
+  const handleDismiss = () => {
+    setShow(false);
+    trackDismiss();
+  }
+
+
+
+  return (
+    <form>
+      <h2>{currentSurvey.title}</h2>
+      <p>{currentSurvey.description}</p>
+      {
+        currentSurvey.questions.map((question) => (
+            // Depending on the question type you can render different components
+        ))
+      }
+      <button onClick={handleDismiss}>Dismiss</button>
+      <button onClick={handleSubmit}>Complete</button>
+    </form>
+  );
+};
+
+export default SurveyComponent;
+
+```
+</Steps>

packages/vite-plugin-posthog/README.md

@@ -6,22 +6,6 @@
 
 Helps you integrate with PostHog specifically designed with Vite in mind. Currently compatible with all frameworks/libraries built by Vite, however we provide additional support for React (Hooks and Components) to make it easier to get started with React. Additional support for other frameworks/libraries is planned, in order to make it easier to get started with PostHog in your framework/library of choice.
 
-## [Documentation](https://vite-posthog.tsotne.co.uk)
+## Documentation
 
-### Available Hooks
-
-| Hook                     | Description                                                                                     |
-| ------------------------ | ----------------------------------------------------------------------------------------------- |
-| useVitePostHog           | Returns the initialized posthog library                                                         |
-| useFeatureFlagEnabled    | Returns a boolean indicating whether the feature flag is enabled.                               |
-| useFeatureFlagPayload    | Returns the payload of the feature flag.                                                        |
-| useFeatureFlagVariantKey | Returns the variant key of the feature flag.                                                    |
-| useActiveFeatureFlags    | Returns an array of active feature flags.                                                       |
-| useGetEnabledSurvey      | Returns a posthog survey matching the id you provided, if the user is able to access the survey |
-
-### Available Components
-
-| Component      | Description                                                                                                |
-| -------------- | ---------------------------------------------------------------------------------------------------------- |
-| PostHogFeature | A component that allows you to render different content based on whether a feature flag is enabled or not. |
-| PageTrack      | A component that allows you to track that a specific route has been visited, on first render               |
+[Available here](https://vite-posthog.tsotne.co.uk)