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

Install

1npm i storybook-mock-date-decorator

API

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

Usage

The syntax here is valid for each respective Storybook version. You may want to check the official docs if you are on a different version or a new one has come out since the last update.

Storybook 8

1import { mockDateDecorator } from "storybook-mock-date-decorator";
2
3/** @type { import('@storybook/react').Preview } */
4const preview = {
5  decorators: [mockDateDecorator],
6  parameters: {
7    controls: {
8      matchers: {
9        color: /(background|color)$/i,
10      },
11    },
12  },
13};
14
15export default preview;

1// stories/Button.stories.js
2
3export default {
4  title: 'Example/Button',
5  component: Button,
6  parameters: {
7    date: new Date(1999, 10, 24),
8  },
9};
10
11export const Primary = {
12  args: {
13    primary: true,
14    label: 'Button',
15  },
16  parameters: {
17    date: new Date(2021, 1, 1),
18  }
19};

Storybook 7

1// .storybook/preview.js
2import { mockDateDecorator } from "storybook-mock-date-decorator/legacy";
3
4export let decorators = [mockDateDecorator];

Storybook 6

1// .storybook/preview.js
2import { addDecorator } from "@storybook/react";
3import { mockDateDecorator } from "storybook-mock-date-decorator/legacy";
4
5addDecorator(mockDateDecorator);

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

1import { Meta } from "@storybook/react"
2import { YourComponent } from "./your-component"
3
4export default {
5	title: "YourComponent",
6	component: YourComponent,
7	parameters: {
8		date: new Date("March 10, 2021 10:00:00"),
9	},
10} as Meta
11

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

1import { Meta } from "@storybook/react"
2import { YourComponent } from "./your-component"
3
4export default {
5	title: "YourComponent",
6	component: YourComponent,
7} as Meta
8
9export function Default() {
10    return <div>hello world at {new Date().toLocaleString()}</div>
11}
12
13export function WithMockedDate() {
14    return <div>hello world! with mocked date of March 10th at {new Date().toLocaleString()}</div>
15}
16WithMockedDate.parameters = {
17    date: new Date("March 10, 2021 10:00:00"),
18}
19