Check for Chromatic
isChromatic()
gives you full control over what code is executed in the Chromatic environment. Use it in your Storybook to omit/include behavior that will be captured in Chromatic’s snapshots.
Use in .storybook/preview.js
This is useful when you want to change behavior of all stories when rendered in Chromatic.
// .storybook/preview.js
import isChromatic from "chromatic/isChromatic";
// Disable animation
if (isChromatic()) {
// The exact method to do this will depend on your animation techniques.
AnimationLibrary.disable = true;
}
// Disable lazyloading
LazyLoad.disabled = isChromatic();
Use in *.stories.js
This is useful when you want to change behavior of one component’s stories when rendered in Chromatic.
// MyComponent.stories.js|jsx
import { MyComponent } from "./MyComponent";
import isChromatic from "chromatic/isChromatic";
export default {
component: MyComponent,
title: "MyComponent",
};
export const StoryName = {
args: {
label: isChromatic() ? `I'm in Chromatic` : `Not in Chromatic`,
},
};
With an environment variable
If you’re working with Storybook 7.0 or later, you can also adjust your chromatic
script and add the IS_CHROMATIC
environment variable to allow you to control the story’s behavior when rendered in Chromatic.
{
"scripts": {
"chromatic": "IS_CHROMATIC=true chromatic"
}
}
Then in your component story file, set the options (e.g., args, parameters) based on the environment variable as follows:
// MyComponent.stories.js|jsx
import { MyComponent } from "./MyComponent";
export default {
component: MyComponent,
title: "MyComponent",
};
export const StoryName = {
args: {
label: process.env.IS_CHROMATIC ? `I'm in Chromatic` : `Not in Chromatic`,
},
};
ℹ️ For Vite-based environments, you may be required to adjust your story to allow it to access the environment variable. See the Vite documentation for more information.