# Use with Storybook

When working with third-party tools like Storybook, developpers typically don't want to send real telemetry data to external platforms. However, the code may still depend on having an instance of the telemetry clients available.

To simplify this setup, the library provides a NoopTelemetryClient class. Follow these steps to use the telemetry clients with Storybook 👇

# Create a Storybook decorator

First, create a Storybook decorator that will provide a fake telemetry client instance to the components:

withTelemetryProvider.tsx
import { NoopTelemetryClient, TelemetryProvider } from "@workleap/telemetry/react";
import { Decorator } from "storybook-react-rsbuild";

const telemetryClient = new NoopTelemetryClient();

export const withTelemetryProvider: Decorator = Story => {
    return (
        <TelemetryProvider client={client}>
            <Story />
        </TelemetryProvider>
    );
};

# Set up the decorator

Then, set up the decorator globally through the preview.ts file:

preview.ts
import { withTelemetryProvider } from "./withTelemetryProvider.tsx";

export const decorators = [withTelemetryProvider];

Or for a specific set of stories:

MyPage.stories.tsx
import { withTelemetryProvider } from "./withTelemetryProvider.tsx";
import { MyPage } from "./MyPage.tsx";
import type { Meta, StoryObj } from "storybook-react-rsbuild";

const meta = {
    title: "MyPage",
    component: MyPage,
    decorators: [withTelemetryProvider]
} satisfies Meta<typeof MyPage>;

export default meta;

type Story = StoryObj<typeof meta>;
 
export const Default: Story = {};

Or for a specific story:

MyPage.stories.tsx
import { withTelemetryProvider } from "./withTelemetryProvider.tsx";
import { MyPage } from "./MyPage.tsx";
import type { Meta, StoryObj } from "storybook-react-rsbuild";

const meta = {
    title: "MyPage",
    component: MyPage
} satisfies Meta<typeof MyPage>;

export default meta;

type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
    decorators: [withTelemetryProvider]
};

# Try it 🚀

Start the Storybook development server and navigate to the story of a component that depends on the telemetry client. The story should render without any error.