diff --git a/packages/browser-sdk/README.md b/packages/browser-sdk/README.md index 89ac9f60..efd0ef1e 100644 --- a/packages/browser-sdk/README.md +++ b/packages/browser-sdk/README.md @@ -270,6 +270,42 @@ If you are not using the Bucket Browser SDK, you can still submit feedback using See details in [Feedback HTTP API](https://docs.bucket.co/reference/http-tracking-api#feedback) +## Toolbar + +The Bucket Toolbar is great for toggling features on/off for yourself to ensure that everything works both when a feature is on and when it's off. + +Toolbar screenshot + +The toolbar will automatically appear on `localhost`. However, it can also be incredibly useful in production. +You have full control over when it appears through the `toolbar` configuration option passed to the `BucketClient`. + +You can pass a simple boolean to force the toolbar to appear/disappear: + +```typescript +const client = new BucketClient({ + // show the toolbar even in production if the user is an internal/admin user + toolbar: user?.isInternal, + ... +}); +``` + +You can also configure the position of the toolbar on the screen: + +```typescript +const client = new BucketClient({ + toolbar: { + show: true; + position: { + placement: "bottom-left", + offset: {x: "1rem", y: "1rem"} + } + } + ... +}) +``` + +See [the reference](https://docs.bucket.co/supported-languages/browser-sdk/globals#toolbaroptions) for details. + ## Event listeners Event listeners allow for capturing various events occurring in the `BucketClient`. This is useful to build integrations with other system or for various debugging purposes. There are 5 kinds of events: @@ -290,7 +326,7 @@ const client = new BucketClient({ }); // or add the hooks after construction: -const unsub = client.on("enabledCheck", (check: CheckEvent) => +const unsub = client.on("check", (check: CheckEvent) => console.log(`Check event ${check}`), ); // use the returned function to unsubscribe, or call `off()` with the same arguments again diff --git a/packages/react-sdk/README.md b/packages/react-sdk/README.md index b76b0fb9..c646943a 100644 --- a/packages/react-sdk/README.md +++ b/packages/react-sdk/README.md @@ -4,6 +4,8 @@ React client side library for [Bucket.co](https://bucket.co) Bucket supports feature toggling, tracking feature usage, [requesting feedback](#userequestfeedback) on features, and [remotely configuring features](#remote-config-beta). +The Bucket React SDK comes with a [built-in toolbar](https://docs.bucket.co/supported-languages/browser-sdk#toolbar) which appears on `localhost` by default. + ## Install Install via npm: @@ -210,7 +212,7 @@ The `` initializes the Bucket SDK, fetches features and starts l - `appBaseUrl`: Optional base URL for the Bucket application. Use this to override the default app URL, - `sseBaseUrl`: Optional base URL for Server-Sent Events. Use this to override the default SSE endpoint, - `debug`: Set to `true` to enable debug logging to the console, -- `toolbar`: Optional configuration for the Bucket toolbar, +- `toolbar`: Optional [configuration](https://docs.bucket.co/supported-languages/browser-sdk/globals#toolbaroptions) for the Bucket toolbar, - `feedback`: Optional configuration for feedback collection ## Hooks