diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index a1385fdf..18e4a6cf 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,35 +1,24 @@ -// For format details, see https://aka.ms/devcontainer.json. For config options, see the -// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node { "name": "React SDK", - - // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile + "image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye", - - // Features to add to the dev container. More info: https://containers.dev/features. - // "features": {}, - - // Use 'forwardPorts' to make a list of ports inside the container available locally. - // "forwardPorts": [], - - // Use 'postCreateCommand' to run commands after the container is created. + "postCreateCommand": "npm install -g npm && yarn install", - - // Configure tool-specific properties. + "customizations": { - "vscode": { - "extensions": [ - "dbaeumer.vscode-eslint", - "eamodio.gitlens", - "esbenp.prettier-vscode", - "Gruntfuggly.todo-tree", - "github.vscode-github-actions", - "Orta.vscode-jest", - "ms-vscode.test-adapter-converter" - ] + "vscode": { + "extensions": [ + "dbaeumer.vscode-eslint", + "eamodio.gitlens", + "esbenp.prettier-vscode", + "Gruntfuggly.todo-tree", + "github.vscode-github-actions", + "Orta.vscode-jest", + "ms-vscode.test-adapter-converter" + ], + "settings": { + "files.eol": "\n" } + } } - - // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. - // "remoteUser": "root" -} + } \ No newline at end of file diff --git a/.gitignore b/.gitignore index b2eac095..98ffa792 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ lib dist/ build/ .rpt2_cache +.env diff --git a/.vscode/settings.json b/.vscode/settings.json index 43248688..23c4b25b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,5 +3,7 @@ "onStartup": [ "all-tests" ] - }, -} \ No newline at end of file + }, + "jest.jestCommandLine": "./node_modules/.bin/jest", + "jest.autoRevealOutput": "on-exec-error" +} diff --git a/README.md b/README.md index 9b072593..5fabb233 100644 --- a/README.md +++ b/README.md @@ -286,6 +286,44 @@ const WrappedMyComponent = withOptimizely(MyComp); **_Note:_** The `optimizely` client object provided via `withOptimizely` is automatically associated with the `user` prop passed to the ancestor `OptimizelyProvider` - the `id` and `attributes` from that `user` object will be automatically forwarded to all appropriate SDK method calls. So, there is no need to pass the `userId` or `attributes` arguments when calling methods of the `optimizely` client object, unless you wish to use _different_ `userId` or `attributes` than those given to `OptimizelyProvider`. +## `useContext` + +Any component under the `` can access the Optimizely `ReactSDKClient` via the `OptimizelyContext` with `useContext`. + +_arguments_ +- `OptimizelyContext : React.Context` The Optimizely context initialized in a parent component (or App). + +_returns_ +- Wrapped object: + - `optimizely : ReactSDKClient` The client object which was passed to the `OptimizelyProvider` + - `isServerSide : boolean` Value that was passed to the `OptimizelyProvider` + - `timeout : number | undefined` The timeout which was passed to the `OptimizelyProvider` + +### Example + +```jsx +import React, { useContext } from 'react'; +import { OptimizelyContext } from '@optimizely/react-sdk'; + +function MyComponent() { + const { optimizely, isServerSide, timeout } = useContext(OptimizelyContext); + const decision = optimizely.decide('my-feature'); + const onClick = () => { + optimizely.track('signup-clicked'); + // rest of your click handling code + }; + return ( + <> + { decision.enabled &&

My feature is enabled

} + { !decision.enabled &&

My feature is disabled

} + { decision.variationKey === 'control-variation' &&

Current Variation

} + { decision.variationKey === 'experimental-variation' &&

Better Variation

} + + + ); +} +``` + ### Tracking Use the `withOptimizely` HoC for tracking. @@ -521,4 +559,4 @@ First-party code subject to copyrights held by Optimizely, Inc. and its contribu - Ruby - https://github.com/optimizely/ruby-sdk -- Swift - https://github.com/optimizely/swift-sdk +- Swift - https://github.com/optimizely/swift-sdk \ No newline at end of file diff --git a/package.json b/package.json index 4c1ff386..9afe3b6a 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "2.9.2", "description": "React SDK for Optimizely Feature Experimentation, Optimizely Full Stack (legacy), and Optimizely Rollouts", "homepage": "https://github.com/optimizely/react-sdk", + "repository": "https://github.com/optimizely/react-sdk", "license": "Apache-2.0", "module": "dist/react-sdk.es.js", "types": "dist/index.d.ts",