-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into monorepo-3.0
- Loading branch information
Showing
8 changed files
with
176 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
docs/client/javascript-mono/_nextJsPageRouterSimpleProvider.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| ## Usage | ||
|
|
||
| In the Page Router model, you will need to wrap your app in `StatsigProvider` which will provide Statsig context throughout your NextJS app. | ||
|
|
||
| Modify your `_app.tsx` to match the following | ||
|
|
||
| ```js | ||
| // _app.tsx | ||
| import type { AppProps } from "next/app"; | ||
| import { StatsigProvider } from "@statsig/react-bindings"; | ||
|
|
||
| export default function App({ Component, pageProps }: AppProps) { | ||
| return ( | ||
| <StatsigProvider sdkKey="client-KEY" user={{ userID: "20" }}> | ||
| <Component {...pageProps} /> | ||
| </StatsigProvider> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| With that wrapper, you're all set to use Statsig gates, experiments and configs. | ||
|
|
||
| ## Gates | ||
|
|
||
| You can check gates by using `useGateValue` hook in any client side rendered page. In this case, let's modify `page.tsx` to check for a gate value: | ||
|
|
||
| ```js | ||
| // index.tsx | ||
| import { useGateValue } from "@statsig/react-bindings"; | ||
|
|
||
| export default function Home() { | ||
| const gate = useGateValue("check_user") | ||
| return ( | ||
| <div> | ||
| Gate Value: {gate ? 'PASSED' : 'FAILED'} | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ## Experiments | ||
|
|
||
| You can reach into the experiment variant and access parameters that are assigned to the specific user by using the useExperiment hook like this: | ||
|
|
||
| ```js | ||
| // index.tsx | ||
| import { useExperiment } from "@statsig/react-bindings"; | ||
|
|
||
| export default function Home() { | ||
| const experiment = useExperiment("headline_test") | ||
| return ( | ||
| <div> | ||
| Headline Parameter: {experiment.get('headline', 'Default')} | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## Updating user properties | ||
|
|
||
| Sometimes you'll need to update user properties, say when the user logs in and a `userID` is assigned, or a set of new properties have been identified. This would require Statsig to go fetch new values for all the gates, experiments and config evaluations. This is achieved by the `useStatsigUser` hook. | ||
|
|
||
| Create the file `pages/login.tsx` and put this code in. Click on the Login button to update the user. | ||
|
|
||
| ```js | ||
| // pages/login.tsx | ||
| import { useGateValue, useStatsigUser } from "@statsig/react-bindings"; | ||
|
|
||
| export default function LoginPage() { | ||
| const gateValue = useGateValue("check_user"); | ||
| const { updateUserAsync } = useStatsigUser(); | ||
| return ( | ||
| <div> | ||
| <div>Gate is {gateValue ? 'passing' : 'failing'}.</div> | ||
| <button onClick={() => updateUserAsync({ userID: "2" })}> | ||
| Login | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters