✨⏰🥶 storybook-mock-date-decorator 🥶⏰✨

to help freeze time or mock dates in your stories

Install

For Storybook 10.0+

npm i storybook-mock-date-decorator@4 -D

For Storybook 9.0+

npm i storybook-mock-date-decorator@3 -D

For Storybook 6, 7, or 8

npm i storybook-mock-date-decorator@2 -D

Note: If you're using Storybook 6, 7, or 8, you must use the /legacy import path. Please refer to the v2.x README for complete usage instructions.

API

Once the decorator has been added to your storybook, you can configure the date with the parameter name date inside your stories.

Usage

Storybook 10

Load the addon decorator:

// .storybook/main.ts

export default {
  stories: [/* ... */],
  addons: [
    "@storybook/addon-docs",
    "storybook-mock-date-decorator", // add this here
  ]
}

Optionally, set a global date for all your stories:

// .storybook/preview.ts
export default {
  parameters: {
    date: new Date('2025-06-01T00:00:00Z'),
  },
};

Or set the date on a per-component or per-story basis:

// stories/Button.stories.tsx

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    date: new Date(1999, 10, 24),
  },
};

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
  parameters: {
    date: new Date(2021, 1, 1),
  }
};

Storybook 9

import { mockDateDecorator } from "storybook-mock-date-decorator";

/** @type { import('@storybook/react').Preview } */
const preview = {
  decorators: [mockDateDecorator],
};

export default preview;

// stories/Button.stories.js

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    date: new Date(1999, 10, 24),
  },
};

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
  parameters: {
    date: new Date(2021, 1, 1),
  }
};

Story Examples

Then inside your storybook, you can use the following code to mock/freeze the date for all stories of a component:

import { Meta } from "@storybook/react"
import { YourComponent } from "./your-component"

export default {
	title: "YourComponent",
	component: YourComponent,
	parameters: {
		date: new Date("March 10, 2021 10:00:00"),
	},
} as Meta

Or you can mock/freeze the date for a specific story:

import { Meta } from "@storybook/react"
import { YourComponent } from "./your-component"

export default {
	title: "YourComponent",
	component: YourComponent,
} as Meta

export function Default() {
    return <div>hello world at {new Date().toLocaleString()}</div>
}

export function WithMockedDate() {
    return <div>hello world! with mocked date of March 10th at {new Date().toLocaleString()}</div>
}
WithMockedDate.parameters = {
    date: new Date("March 10, 2021 10:00:00"),
}

Version Compatibility

Storybook Version	Package Version	Import Path	Documentation
10.0+	@4	storybook-mock-date-decorator	This README
9.0+	@3	storybook-mock-date-decorator	v3.x README
8.x	@2	storybook-mock-date-decorator/legacy	v2.x README
6.x, 7.x	@2	storybook-mock-date-decorator/legacy	v2.x README

Important: For Storybook 6, 7, and 8, you must use the /legacy import path and follow the setup instructions in the v2.x documentation.