From 6752499868bb5ee76bbbfced2385786a96876e34 Mon Sep 17 00:00:00 2001 From: Chantal Chung Date: Thu, 13 Apr 2023 12:17:11 -0700 Subject: [PATCH] split React SDK docs into three sections --- .../feature-management/edgedb/edge-flags.md | 2 +- .../javascript/javascript-install.md | 4 +- docs/sdk/client-side-sdks/react.md | 350 ------------------ .../sdk/client-side-sdks/react/_category_.yml | 2 + .../react/react-gettingstarted.md | 106 ++++++ .../client-side-sdks/react/react-install.md | 36 ++ .../sdk/client-side-sdks/react/react-usage.md | 202 ++++++++++ docs/sdk/client-side-sdks/react/react.md | 18 + docs/sdk/example-apps.md | 2 +- docs/sdk/features/all-features.md | 2 +- docs/sdk/features/all-variables.md | 2 +- docs/sdk/features/evaluating.md | 2 +- docs/sdk/features/identify.md | 2 +- docs/sdk/features/initialization.md | 2 +- docs/sdk/features/reset.md | 2 +- docs/sdk/features/track.md | 2 +- 16 files changed, 375 insertions(+), 361 deletions(-) delete mode 100644 docs/sdk/client-side-sdks/react.md create mode 100644 docs/sdk/client-side-sdks/react/_category_.yml create mode 100644 docs/sdk/client-side-sdks/react/react-gettingstarted.md create mode 100644 docs/sdk/client-side-sdks/react/react-install.md create mode 100644 docs/sdk/client-side-sdks/react/react-usage.md create mode 100644 docs/sdk/client-side-sdks/react/react.md diff --git a/docs/home/feature-management/edgedb/edge-flags.md b/docs/home/feature-management/edgedb/edge-flags.md index 35707571..c3ad67a8 100644 --- a/docs/home/feature-management/edgedb/edge-flags.md +++ b/docs/home/feature-management/edgedb/edge-flags.md @@ -81,7 +81,7 @@ For specific documentation on how to use Edge Flags with each SDK - [JS SDK](/sdk/client-side-sdks/javascript/javascript-usage#edgedb) - [iOS SDK](/sdk/client-side-sdks/ios#edgedb) - [Android SDK](/sdk/client-side-sdks/android#edgedb) -- [React SDK](/sdk/client-side-sdks/react#edgedb) +- [React SDK](/sdk/client-side-sdks/react/react-usage#edgedb) - [React Native](/sdk/client-side-sdks/react-native/react-native-usage#edgedb) #### Server SDKs diff --git a/docs/sdk/client-side-sdks/javascript/javascript-install.md b/docs/sdk/client-side-sdks/javascript/javascript-install.md index 573ac3a1..4ec1cce3 100644 --- a/docs/sdk/client-side-sdks/javascript/javascript-install.md +++ b/docs/sdk/client-side-sdks/javascript/javascript-install.md @@ -5,7 +5,7 @@ sidebar_position: 1 --- -## 1. NPM Module +## NPM Module The recommended way to include the JS SDK is by bundling it with the rest of your application code using our NPM Module. @@ -21,7 +21,7 @@ To use the JS SDK in your project, import the `initialize` function: import { initialize } from "@devcycle/devcycle-js-sdk"; ``` -## 2. Using the CDN +## Using the CDN If you want to load the JS SDK on your webpage separately from your main application bundle, you can use a script tag to do so. diff --git a/docs/sdk/client-side-sdks/react.md b/docs/sdk/client-side-sdks/react.md deleted file mode 100644 index 0e637e49..00000000 --- a/docs/sdk/client-side-sdks/react.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -title: React SDK -sidebar_position: 2 ---- - -# DevCycle React SDK - -The DevCycle React SDK lets you easily integrate your React web applications with DevCycle. This SDK is also utilized for [React Native](/sdk/client-side-sdks/react-native/) - -:::info - -Currently, DevCycle for React only supports access via functional component hooks. - -::: - -The SDK is available as a package on npm. It is also open source and can be viewed on Github. - -[![Npm package version](https://badgen.net/npm/v/@devcycle/devcycle-react-sdk)](https://www.npmjs.com/package/@devcycle/devcycle-react-sdk) -[![GitHub](https://img.shields.io/github/stars/devcyclehq/js-sdks.svg?style=social&label=Star&maxAge=2592000)](https://github.com/devcyclehq/js-sdks) - -## Requirements: - -This SDK is compatible with React versions 16.8.0 and above. - -:::info - -For React 17.x, there is an underlying issue for how the React Runtime is resolved. - -The interim fix, is to add an alias resolution to your build configuration for `'react/jsx-runtime': require.resolve('react/jsx-runtime')`. - -For more information, please review these Github Issues [React Issue](https://github.com/facebook/react/issues/20235), [Create React App Issue](https://github.com/facebook/create-react-app/issues/11769) & related PR [React Runtime PR](https://github.com/facebook/create-react-app/pull/11797). - -For additional help, please contact DevCycle support at [support@devcycle.com](mailto:support@devcycle.com). - -::: - - -## Installation - -To install the SDK, run the following command: - -```bash -npm install --save @devcycle/devcycle-react-sdk -``` -or - -```bash -yarn add @devcycle/devcycle-react-sdk -``` - -## Getting Started - -There are two ways to initialize the SDK: -* Non-Blocking: This loads your application and makes a request to initialize the SDK in the background. Once this request is complete, - your application will be ready to use the SDK. -* Blocking: This allows you to delay the rendering of your application until the request to initialize the SDK is completed. - -To use these providers, you must get the SDK Key from the DevCycle Dashboard. -You can optionally pass in a user object to the provider to initialize the SDK. -If you do not pass in a user to the provider, it will create an anonymous user and initialize the SDK with it. -You can then call the `identifyUser` method on the client once the user has been authenticated. -See [Identifying Users & Setting Properties](/sdk/features/identify) for more details. - -:::info - - It’s best to initialize DevCycle in your root component (App.jsx or App.tsx), so that its hooks can be accessed from anywhere within your application. - -::: - -### Non-Blocking - -The withDVCProvider higher-order component (HOC) initializes the React SDK and wraps your root component. This provider may cause your app -to flicker when it is first rendered, as it is waiting for the SDK to initialize. - -```js -import { withDVCProvider } from '@devcycle/devcycle-react-sdk' -``` -```js -export default withDVCProvider({ sdkKey: '' })(App) -``` - -### Blocking - -The `useIsDVCInitialized` hook allows you to block rendering of your application until SDK initialization is complete. This ensures your app does not flicker due to value changes and enables you to control what you want displayed when initialization isn't finished yet. - -```js -import { useIsDVCInitialized, withDVCProvider } from '@devcycle/devcycle-react-sdk' -``` -```js -function App() { - const dvcReady = useIsDVCInitialized() - - if (!dvcReady) return - return -} - -export default withDVCProvider({ sdkKey: '' })(App) -``` - -:::caution - -The asyncWithDVCProvider function has been deprecated as of version 1.3.0 - -::: - -The asyncWithDVCProvider function is similar to the withDVCProvider function, but allows you to block rendering of your application -until SDK initialization is complete. This ensures your app does not flicker due to value changes. - -```js -import { asyncWithDVCProvider } from '@devcycle/devcycle-react-sdk' -``` -```js -(async () => { - const DVCProvider = await asyncWithDVCProvider({ sdkKey: '' }) - - ReactDOM.render( - - - - ) -})(); -``` - -## Usage - -### Provider Config - -The `withDVCProvider` function accepts a Provider Config object: - -[DVC ProviderConfig Typescript Schema](https://github.com/DevCycleHQ/js-sdks/blob/main/sdk/react/src/types.ts#L3) - -| Property | Type | Description | -|------------|------|------------------------| -| sdkKey | string | SDK key | -| user | [DVCUser](https://github.com/DevCycleHQ/js-sdks/blob/main/sdk/js/src/types.ts#L55) | DevCycle user object | -| options | [DVCOptions](https://github.com/DevCycleHQ/js-sdks/blob/main/sdk/js/src/types.ts#L44) | DevCycle options object | - -### Initialization Options - -The SDK exposes various initialization options which can be set by passing a `DVCOptions` object in the Provider Config: - -[DVCOptions Typescript Schema](https://github.com/DevCycleHQ/js-sdks/blob/main/sdk/js/src/types.ts#L44) - -| DVC Option | Type | Description | -|------------|------|-------------| -| eventFlushIntervalMS | number | Controls the interval between flushing events to the DevCycle servers in milliseconds, defaults to 10 seconds. | -| enableEdgeDB | boolean | Enables the usage of EdgeDB for DevCycle that syncs User Data to DevCycle. | -| logger | [DVCLogger](https://github.com/DevCycleHQ/js-sdks/blob/main/lib/shared/types/src/logger.ts#L2) | Logger override to replace default logger | -| logLevel | [DVCDefaultLogLevel](https://github.com/DevCycleHQ/js-sdks/blob/main/lib/shared/types/src/logger.ts#L12) | Set log level of the default logger. Options are: `debug`, `info`, `warn`, `error`. Defaults to `info`. | -| apiProxyURL | string | Allows the SDK to communicate with a proxy of DVC bucketing API / client SDK API. | -| configCacheTTL | number | The maximum allowed age of a cached config in milliseconds, defaults to 7 days | -| disableConfigCache | boolean | Disable the use of cached configs | -| disableRealtimeUpdates | boolean | Disable Realtime Updates | - -### Getting a Variable - -The SDK provides a hook to access your DevCycle variables: - -#### useVariableValue - -Use this hook to access the value of your DevCycle variables inside your components. -It takes in your variable key as well as a default value and returns the value of the variable. - -The hook will return the default value if the SDK has not yet finished initializing. - -```js -import { useVariableValue } from '@devcycle/devcycle-react-sdk' - -const DVCFeaturePage = () => { - const variableKey = 'my-feature' - const defaultValue = 'false' - const featureVariable = useVariableValue(variableKey, defaultValue) - - return ( -
- { featureVariable ?
Variable on!
:
Variable off
} -
- ) -} -``` - -See [getVariableByKey](https://docs.devcycle.com/bucketing-api/#operation/getVariableByKey) on the Bucketing API for the variable response format. - -If a change on the dashboard triggers your variable value to change, it will rerender your page to reflect your new variable value. To learn more, visit the [Realtime Updates](/sdk/features/realtime-updates) page. - -### Getting the DevCycle Client - -The SDK provides a hook to access the underlying DevCycle client. This allows you identify users, track events, and directly access -variables: - -#### useDVCClient - -```js -import { useDVCClient } from '@devcycle/devcycle-react-sdk' - -const DVCFeaturePage = () => { - const newUser = { - user_id: 'new_user_id' - } - const dvcClient = useDVCClient() - - const identifyUser = () => { - dvcClient.identifyUser(newUser) - .then((variables) => console.log('Updated Variables:', variables)) - } - - - return ( - <> - - - ) -} -``` - -### Identifying Users - -To change the identity of the user, or to add more properties to the same user passed into the DVC provider component, pass in the entire user properties object into `identifyUser`: - -```js -const user = { - user_id: 'user1', - name: 'user 1 name', - customData: { - customKey: 'customValue' - } -} -dvcClient.identifyUser(user) -``` - -The client object can be obtained from the [useDVCClient](#getting-the-devcycle-client) hook. - -To wait on Variables that will be returned from the `identify` call, you can pass in a callback or use the Promise returned if no callback is passed in: - -```js -const variableSet = await dvcClient.identifyUser(user) - -// OR - -dvcClient.identifyUser(user, (err, variables) => { - // variables is the variable set for the identified user -}) -``` - -### Resetting User - -To reset the user's identity, call `resetUser`. This will create a new anonymous user with a randomized `user_id`. - -```js -dvcClient.resetUser() -``` - -The client object can be obtained from the [useDVCClient](#getting-the-devcycle-client) hook. - - -To wait on the Features of the anonymous user, you can pass in a callback or use the Promise returned if no callback is passed in: - -```js -const variableSet = await dvcClient.resetUser() - -// OR - -dvcClient.resetUser((err, variables) => { - // variables is the variable set for the anonymous user -}) -``` - -### Getting All Features / Variables - -To get all the Features or Variables that have been enabled for this user: - -```js -const features = dvcClient.allFeatures() -const variables = dvcClient.allVariables() -``` - -The client object can be obtained from the [useDVCClient](#getting-the-devcycle-client) hook. - -If the SDK has not finished initializing, these methods will return an empty object. - -See [getVariables](https://docs.devcycle.com/bucketing-api/#operation/getVariables) and [getFeatures](https://docs.devcycle.com/bucketing-api/#operation/getFeatures) on the Bucketing API for the response formats. - - -:::note - -The DevCycle React SDK is built upon the JavaScript SDK. For further details, view [the JavaScript SDK documentation](/sdk/client-side-sdks/javascript) - -::: - - - -### Track Events -Events can be tracked by calling the `track` method provided by the client object, which you can access with the -[useDVCClient](#getting-the-devcycle-client) hook. The track method takes an event type as well as other optional fields. - -```js -const event = { - type: 'my_event_type', // this is required - date: new Date(), - target: 'my_target', - value: 5, - metaData: { - key: 'value' - } -} -dvcClient.track(event) -``` - -The SDK will flush events every 10s or `flushEventsMS` specified in the Provider options. To manually flush events, call: - -```js -await dvcClient.flushEvents() - -// or - -dvcClient.flushEvents(() => { - // called back after flushed events -}) -``` - -### EdgeDB - -EdgeDB allows you to save user data to our EdgeDB storage so that you don't have to pass in all the user data every time you identify a user. - -To get started, enable EdgeDB on your project by following the guide [here](/home/feature-management/edgedb/edge-flags) - -Once you have EdgeDB enabled in your project, pass in the `enableEdgeDB` option to turn on EdgeDB mode for the SDK: - -```js -const user = { - user_id: 'test_user', - customData: { - amountSpent: 50 - } -} -const options = { - enableEdgeDB: true -} - -export default withDVCProvider({ sdkKey: '', user, options })(App) -``` - -This will send a request to our EdgeDB API to save the custom data under the user `test_user`. - -In the example, `amountSpent` is associated to the user `test_user`. In your next `identify` call for the same `user_id`, -you may omit any of the data you've sent already as it will be pulled from the EdgeDB storage when segmenting to experiments and features: - -``` -dvcClient.identifyUser({ user_id: 'test_user' }) // no need to pass in "amountSpent" any more! -``` diff --git a/docs/sdk/client-side-sdks/react/_category_.yml b/docs/sdk/client-side-sdks/react/_category_.yml new file mode 100644 index 00000000..bfbc4629 --- /dev/null +++ b/docs/sdk/client-side-sdks/react/_category_.yml @@ -0,0 +1,2 @@ +position: 2 +collapsed: true \ No newline at end of file diff --git a/docs/sdk/client-side-sdks/react/react-gettingstarted.md b/docs/sdk/client-side-sdks/react/react-gettingstarted.md new file mode 100644 index 00000000..30b39916 --- /dev/null +++ b/docs/sdk/client-side-sdks/react/react-gettingstarted.md @@ -0,0 +1,106 @@ +--- +title: React SDK Getting Started +sidebar_label: Getting Started +sidebar_position: 2 +--- + +There are two ways to initialize the SDK: +* Non-Blocking: This loads your application and makes a request to initialize the SDK in the background. Once this request is complete, + your application will be ready to use the SDK. +* Blocking: This allows you to delay the rendering of your application until the request to initialize the SDK is completed. + +To use these providers, you must get the SDK Key from the DevCycle Dashboard. +You can optionally pass in a user object to the provider to initialize the SDK. +If you do not pass in a user to the provider, it will create an anonymous user and initialize the SDK with it. +You can then call the `identifyUser` method on the client once the user has been authenticated. +See [Identifying Users & Setting Properties](/sdk/features/identify) for more details. + +:::info + + It’s best to initialize DevCycle in your root component (App.jsx or App.tsx), so that its hooks can be accessed from anywhere within your application. + +::: + + +## Non-Blocking + +The withDVCProvider higher-order component (HOC) initializes the React SDK and wraps your root component. This provider may cause your app +to flicker when it is first rendered, as it is waiting for the SDK to initialize. + +```js +import { withDVCProvider } from '@devcycle/devcycle-react-sdk' +``` +```js +export default withDVCProvider({ sdkKey: '' })(App) +``` + +## Blocking + +The `useIsDVCInitialized` hook allows you to block rendering of your application until SDK initialization is complete. This ensures your app does not flicker due to value changes and enables you to control what you want displayed when initialization isn't finished yet. + +```js +import { useIsDVCInitialized, withDVCProvider } from '@devcycle/devcycle-react-sdk' +``` +```js +function App() { + const dvcReady = useIsDVCInitialized() + + if (!dvcReady) return + return +} + +export default withDVCProvider({ sdkKey: '' })(App) +``` + +:::caution + +The asyncWithDVCProvider function has been deprecated as of version 1.3.0 + +::: + +The asyncWithDVCProvider function is similar to the withDVCProvider function, but allows you to block rendering of your application +until SDK initialization is complete. This ensures your app does not flicker due to value changes. + +```js +import { asyncWithDVCProvider } from '@devcycle/devcycle-react-sdk' +``` +```js +(async () => { + const DVCProvider = await asyncWithDVCProvider({ sdkKey: '' }) + + ReactDOM.render( + + + + ) +})(); +``` + +## Provider Config + +The `withDVCProvider` function accepts a Provider Config object: + +[DVC ProviderConfig Typescript Schema](https://github.com/DevCycleHQ/js-sdks/blob/main/sdk/react/src/types.ts#L3) + +| Property | Type | Description | +|------------|------|------------------------| +| sdkKey | string | SDK key | +| user | [DVCUser](https://github.com/DevCycleHQ/js-sdks/blob/main/sdk/js/src/types.ts#L55) | DevCycle user object | +| options | [DVCOptions](https://github.com/DevCycleHQ/js-sdks/blob/main/sdk/js/src/types.ts#L44) | DevCycle options object | + +## Initialization Options + +The SDK exposes various initialization options which can be set by passing a `DVCOptions` object in the Provider Config: + +[DVCOptions Typescript Schema](https://github.com/DevCycleHQ/js-sdks/blob/main/sdk/js/src/types.ts#L44) + +| DVC Option | Type | Description | +|------------|------|-------------| +| eventFlushIntervalMS | number | Controls the interval between flushing events to the DevCycle servers in milliseconds, defaults to 10 seconds. | +| enableEdgeDB | boolean | Enables the usage of EdgeDB for DevCycle that syncs User Data to DevCycle. | +| logger | [DVCLogger](https://github.com/DevCycleHQ/js-sdks/blob/main/lib/shared/types/src/logger.ts#L2) | Logger override to replace default logger | +| logLevel | [DVCDefaultLogLevel](https://github.com/DevCycleHQ/js-sdks/blob/main/lib/shared/types/src/logger.ts#L12) | Set log level of the default logger. Options are: `debug`, `info`, `warn`, `error`. Defaults to `info`. | +| apiProxyURL | string | Allows the SDK to communicate with a proxy of DVC bucketing API / client SDK API. | +| configCacheTTL | number | The maximum allowed age of a cached config in milliseconds, defaults to 7 days | +| disableConfigCache | boolean | Disable the use of cached configs | +| disableRealtimeUpdates | boolean | Disable Realtime Updates | diff --git a/docs/sdk/client-side-sdks/react/react-install.md b/docs/sdk/client-side-sdks/react/react-install.md new file mode 100644 index 00000000..2747a83a --- /dev/null +++ b/docs/sdk/client-side-sdks/react/react-install.md @@ -0,0 +1,36 @@ +--- +title: React SDK Installation +sidebar_label: Installation +sidebar_position: 1 +--- + + +## Requirements + +This SDK is compatible with React versions 16.8.0 and above. + +:::info + +For React 17.x, there is an underlying issue for how the React Runtime is resolved. + +The interim fix, is to add an alias resolution to your build configuration for `'react/jsx-runtime': require.resolve('react/jsx-runtime')`. + +For more information, please review these Github Issues [React Issue](https://github.com/facebook/react/issues/20235), [Create React App Issue](https://github.com/facebook/create-react-app/issues/11769) & related PR [React Runtime PR](https://github.com/facebook/create-react-app/pull/11797). + +For additional help, please contact DevCycle support at [support@devcycle.com](mailto:support@devcycle.com). + +::: + + +## Installation + +To install the SDK, run the following command: + +```bash +npm install --save @devcycle/devcycle-react-sdk +``` +or + +```bash +yarn add @devcycle/devcycle-react-sdk +``` diff --git a/docs/sdk/client-side-sdks/react/react-usage.md b/docs/sdk/client-side-sdks/react/react-usage.md new file mode 100644 index 00000000..9bb84bc8 --- /dev/null +++ b/docs/sdk/client-side-sdks/react/react-usage.md @@ -0,0 +1,202 @@ +--- +title: React SDK Usage +sidebar_label: Usage +sidebar_position: 3 +--- + +## Getting a Variable + +The SDK provides a hook to access your DevCycle variables: + +### useVariableValue + +Use this hook to access the value of your DevCycle variables inside your components. +It takes in your variable key as well as a default value and returns the value of the variable. + +The hook will return the default value if the SDK has not yet finished initializing. + +```js +import { useVariableValue } from '@devcycle/devcycle-react-sdk' + +const DVCFeaturePage = () => { + const variableKey = 'my-feature' + const defaultValue = 'false' + const featureVariable = useVariableValue(variableKey, defaultValue) + + return ( +
+ { featureVariable ?
Variable on!
:
Variable off
} +
+ ) +} +``` + +See [getVariableByKey](https://docs.devcycle.com/bucketing-api/#operation/getVariableByKey) on the Bucketing API for the variable response format. + +If a change on the dashboard triggers your variable value to change, it will rerender your page to reflect your new variable value. To learn more, visit the [Realtime Updates](/sdk/features/realtime-updates) page. + +## Getting the DevCycle Client + +The SDK provides a hook to access the underlying DevCycle client. This allows you identify users, track events, and directly access +variables: + +### useDVCClient + +```js +import { useDVCClient } from '@devcycle/devcycle-react-sdk' + +const DVCFeaturePage = () => { + const newUser = { + user_id: 'new_user_id' + } + const dvcClient = useDVCClient() + + const identifyUser = () => { + dvcClient.identifyUser(newUser) + .then((variables) => console.log('Updated Variables:', variables)) + } + + + return ( + <> + + + ) +} +``` + +## Identifying Users + +To change the identity of the user, or to add more properties to the same user passed into the DVC provider component, pass in the entire user properties object into `identifyUser`: + +```js +const user = { + user_id: 'user1', + name: 'user 1 name', + customData: { + customKey: 'customValue' + } +} +dvcClient.identifyUser(user) +``` + +The client object can be obtained from the [useDVCClient](#getting-the-devcycle-client) hook. + +To wait on Variables that will be returned from the `identify` call, you can pass in a callback or use the Promise returned if no callback is passed in: + +```js +const variableSet = await dvcClient.identifyUser(user) + +// OR + +dvcClient.identifyUser(user, (err, variables) => { + // variables is the variable set for the identified user +}) +``` + +## Resetting User + +To reset the user's identity, call `resetUser`. This will create a new anonymous user with a randomized `user_id`. + +```js +dvcClient.resetUser() +``` + +The client object can be obtained from the [useDVCClient](#getting-the-devcycle-client) hook. + + +To wait on the Features of the anonymous user, you can pass in a callback or use the Promise returned if no callback is passed in: + +```js +const variableSet = await dvcClient.resetUser() + +// OR + +dvcClient.resetUser((err, variables) => { + // variables is the variable set for the anonymous user +}) +``` + +## Getting All Features / Variables + +To get all the Features or Variables that have been enabled for this user: + +```js +const features = dvcClient.allFeatures() +const variables = dvcClient.allVariables() +``` + +The client object can be obtained from the [useDVCClient](#getting-the-devcycle-client) hook. + +If the SDK has not finished initializing, these methods will return an empty object. + +See [getVariables](https://docs.devcycle.com/bucketing-api/#operation/getVariables) and [getFeatures](https://docs.devcycle.com/bucketing-api/#operation/getFeatures) on the Bucketing API for the response formats. + + +:::note + +The DevCycle React SDK is built upon the JavaScript SDK. For further details, view [the JavaScript SDK documentation](/sdk/client-side-sdks/javascript) + +::: + + + +## Track Events +Events can be tracked by calling the `track` method provided by the client object, which you can access with the +[useDVCClient](#getting-the-devcycle-client) hook. The track method takes an event type as well as other optional fields. + +```js +const event = { + type: 'my_event_type', // this is required + date: new Date(), + target: 'my_target', + value: 5, + metaData: { + key: 'value' + } +} +dvcClient.track(event) +``` + +The SDK will flush events every 10s or `flushEventsMS` specified in the Provider options. To manually flush events, call: + +```js +await dvcClient.flushEvents() + +// or + +dvcClient.flushEvents(() => { + // called back after flushed events +}) +``` + +## EdgeDB + +EdgeDB allows you to save user data to our EdgeDB storage so that you don't have to pass in all the user data every time you identify a user. + +To get started, enable EdgeDB on your project by following the guide [here](/home/feature-management/edgedb/edge-flags) + +Once you have EdgeDB enabled in your project, pass in the `enableEdgeDB` option to turn on EdgeDB mode for the SDK: + +```js +const user = { + user_id: 'test_user', + customData: { + amountSpent: 50 + } +} +const options = { + enableEdgeDB: true +} + +export default withDVCProvider({ sdkKey: '', user, options })(App) +``` + +This will send a request to our EdgeDB API to save the custom data under the user `test_user`. + +In the example, `amountSpent` is associated to the user `test_user`. In your next `identify` call for the same `user_id`, +you may omit any of the data you've sent already as it will be pulled from the EdgeDB storage when segmenting to experiments and features: + +``` +dvcClient.identifyUser({ user_id: 'test_user' }) // no need to pass in "amountSpent" any more! +``` diff --git a/docs/sdk/client-side-sdks/react/react.md b/docs/sdk/client-side-sdks/react/react.md new file mode 100644 index 00000000..56a58ce3 --- /dev/null +++ b/docs/sdk/client-side-sdks/react/react.md @@ -0,0 +1,18 @@ +--- +title: React SDK +--- + +# DevCycle React SDK + +The DevCycle React SDK lets you easily integrate your React web applications with DevCycle. This SDK is also utilized for [React Native](/sdk/client-side-sdks/react-native/) + +:::info + +Currently, DevCycle for React only supports access via functional component hooks. + +::: + +The SDK is available as a package on npm. It is also open source and can be viewed on Github. + +[![Npm package version](https://badgen.net/npm/v/@devcycle/devcycle-react-sdk)](https://www.npmjs.com/package/@devcycle/devcycle-react-sdk) +[![GitHub](https://img.shields.io/github/stars/devcyclehq/js-sdks.svg?style=social&label=Star&maxAge=2592000)](https://github.com/devcyclehq/js-sdks) diff --git a/docs/sdk/example-apps.md b/docs/sdk/example-apps.md index 763c748a..2373ba20 100644 --- a/docs/sdk/example-apps.md +++ b/docs/sdk/example-apps.md @@ -23,6 +23,6 @@ Welcome to the Samples & Example Apps page, which showcases example applications | [NodeJS](https://github.com/DevCycleHQ/js-sdks/tree/main/sdk/nodejs) | [NodeJS Reference Docs](/sdk/server-side-sdks/node.md) | | [PHP](https://github.com/DevCycleHQ/php-server-sdk) | [PHP Reference Docs](/sdk/server-side-sdks/php/php.md) | | [Python](https://github.com/DevCycleHQ/python-server-sdk) | [Python Reference Docs](/sdk/server-side-sdks/python.md) | -| [React](https://github.com/DevCycleHQ/js-sdks/tree/main/examples/react) | [React Reference Docs](/sdk/client-side-sdks/react.md) | +| [React](https://github.com/DevCycleHQ/js-sdks/tree/main/examples/react) | [React Reference Docs](/sdk/client-side-sdks/react/react.md) | | [React Native](https://github.com/DevCycleHQ/js-sdks/tree/main/examples/react/react-native-app) | [React Native Reference Docs](/sdk/client-side-sdks/react-native/react-native.md) | | [Ruby](https://github.com/DevCycleHQ/ruby-server-sdk) | [Ruby Reference Docs](/sdk/server-side-sdks/ruby.md) | diff --git a/docs/sdk/features/all-features.md b/docs/sdk/features/all-features.md index 1f0743bb..4a9d4a79 100644 --- a/docs/sdk/features/all-features.md +++ b/docs/sdk/features/all-features.md @@ -41,7 +41,7 @@ Features that within the Project that have rules disabled OR the user is not Tar ### [• JavaScript SDK](/sdk/client-side-sdks/javascript/javascript-usage#get-all-features) -### [• React SDK](/sdk/client-side-sdks/react#getting-all-features--variables) +### [• React SDK](/sdk/client-side-sdks/react/react-usage#getting-all-features--variables) :::note diff --git a/docs/sdk/features/all-variables.md b/docs/sdk/features/all-variables.md index 1d8cb290..b6420eb6 100644 --- a/docs/sdk/features/all-variables.md +++ b/docs/sdk/features/all-variables.md @@ -41,7 +41,7 @@ Features within the Project that have rules disabled OR the user is not Targeted ### [• JavaScript SDK](/sdk/client-side-sdks/javascript/javascript-usage#get-all-variables) -### [• React SDK](/sdk/client-side-sdks/react#getting-all-features--variables) +### [• React SDK](/sdk/client-side-sdks/react/react-usage#getting-all-features--variables) :::note diff --git a/docs/sdk/features/evaluating.md b/docs/sdk/features/evaluating.md index f89a2d0d..fd75a0a5 100644 --- a/docs/sdk/features/evaluating.md +++ b/docs/sdk/features/evaluating.md @@ -13,7 +13,7 @@ If there is an error reaching DevCycle, if the requested variable does not exist ### [• Javascript SDK](/sdk/client-side-sdks/javascript/javascript-usage#getting-variable-values) -### [• React SDK](/sdk/client-side-sdks/react#getting-a-variable) +### [• React SDK](/sdk/client-side-sdks/react/react-usage#getting-a-variable) ### [• iOS SDK](/sdk/client-side-sdks/ios#using-variable-values) diff --git a/docs/sdk/features/identify.md b/docs/sdk/features/identify.md index 6ab4d5d3..0bc35e3c 100644 --- a/docs/sdk/features/identify.md +++ b/docs/sdk/features/identify.md @@ -71,7 +71,7 @@ To reset a user completely, please view [Resetting a User](/sdk/features/reset). ### [• Javascript SDK](/sdk/client-side-sdks/javascript/javascript-usage#identifying-user) -### [• React SDK](/sdk/client-side-sdks/react#identifying-users) +### [• React SDK](/sdk/client-side-sdks/react/react-usage#identifying-users) ### [• iOS SDK](/sdk/client-side-sdks/ios#identifying-user) diff --git a/docs/sdk/features/initialization.md b/docs/sdk/features/initialization.md index bd4c054a..c8fa8026 100644 --- a/docs/sdk/features/initialization.md +++ b/docs/sdk/features/initialization.md @@ -23,7 +23,7 @@ If a variable is first read from the cache and has a listener for [realtime upda ### [• Javascript SDK](/sdk/client-side-sdks/javascript/javascript-install) -### [• React SDK](/sdk/client-side-sdks/react#installation) +### [• React SDK](/sdk/client-side-sdks/react/react-gettingstarted) ### [• iOS SDK](/sdk/client-side-sdks/ios#using-variable-values) diff --git a/docs/sdk/features/reset.md b/docs/sdk/features/reset.md index f673b0af..9bf86877 100644 --- a/docs/sdk/features/reset.md +++ b/docs/sdk/features/reset.md @@ -15,7 +15,7 @@ Currently, the Identify function is only available on Client-Side SDKs. These SD ### [• Javascript SDK](/sdk/client-side-sdks/javascript/javascript-usage#reset-user) -### [• React SDK](/sdk/client-side-sdks/react#resetting-user) +### [• React SDK](/sdk/client-side-sdks/react/react-usage#resetting-user) ### [• React Native SDK](/sdk/client-side-sdks/react-native/react-native-usage#resetting-user) diff --git a/docs/sdk/features/track.md b/docs/sdk/features/track.md index abec5f3b..0a235fe4 100644 --- a/docs/sdk/features/track.md +++ b/docs/sdk/features/track.md @@ -17,7 +17,7 @@ The Track function in the DevCycle SDKs allows you to send up custom events whic ### [• Javascript SDK](/sdk/client-side-sdks/javascript/javascript-usage#tracking-events) -### [• React SDK](/sdk/client-side-sdks/react#track-events) +### [• React SDK](/sdk/client-side-sdks/react/react-usage#track-events) ### [• React Native SDK](/sdk/client-side-sdks/react-native/react-native-usage#track-events)