@storybook/addon-highlight v8.0.9
Storybook Addon Highlight
Storybook addon allows for highlighting specific DOM nodes within your story.
Use it to call attention to particular parts of the story. Or use it to enhance other addons that you might be building. For example, Accessibility addon uses it to highlight DOM nodes that are failing accessibility checks.
Usage
This addon requires Storybook 6.5 or later. Highlight is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
npm i -D @storybook/addon-highlight
Add "@storybook/addon-highlight"
to the addons array in your .storybook/main.js
:
module.exports = {
addons: ['@storybook/addon-highlight'],
};
Apply or clear highlights
Highlight DOM nodes by emitting the HIGHLIGHT
event from within a story or an addon. The event payload must contain a list of selectors you want to highlight.
import React, { useEffect } from 'react';
import { useChannel } from '@storybook/addons';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } form './MyComponent';
export default { component: MyComponent };
export const MyStory = () => {
const emit = useChannel({});
useEffect(() => {
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
});
}, []);
return <MyComponent />;
};
Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the RESET_HIGHLIGHT
event.
emit(RESET_HIGHLIGHT);
Customize style
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
color: 'red',
style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
});
14 hours ago
1 day ago
2 days ago
2 days ago
3 days ago
3 days ago
9 days ago
9 days ago
10 days ago
11 days ago
13 days ago
13 days ago
13 days ago
13 days ago
13 days ago
13 days ago
13 days ago
15 days ago
16 days ago
16 days ago
16 days ago
16 days ago
16 days ago
17 days ago
17 days ago
17 days ago
20 days ago
20 days ago
20 days ago
20 days ago
21 days ago
21 days ago
21 days ago
21 days ago
21 days ago
24 days ago
27 days ago
27 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
8 months ago
5 months ago
9 months ago
5 months ago
7 months ago
8 months ago
5 months ago
9 months ago
5 months ago
9 months ago
8 months ago
5 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
5 months ago
5 months ago
6 months ago
9 months ago
6 months ago
6 months ago
5 months ago
10 months ago
10 months ago
10 months ago
6 months ago
9 months ago
9 months ago
7 months ago
6 months ago
9 months ago
8 months ago
8 months ago
9 months ago
5 months ago
6 months ago
5 months ago
5 months ago
5 months ago
6 months ago
7 months ago
9 months ago
7 months ago
7 months ago
9 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
5 months ago
9 months ago
8 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
7 months ago
5 months ago
8 months ago
7 months ago
7 months ago
5 months ago
7 months ago
9 months ago
7 months ago
10 months ago
7 months ago
5 months ago
9 months ago
7 months ago
5 months ago
5 months ago
9 months ago
6 months ago
6 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
5 months ago
9 months ago
10 months ago
7 months ago
6 months ago
6 months ago
5 months ago
7 months ago
10 months ago
5 months ago
6 months ago
8 months ago
6 months ago
6 months ago
7 months ago
7 months ago
10 months ago
9 months ago
6 months ago
6 months ago
5 months ago
10 months ago
10 months ago
10 months ago
10 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
9 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
9 months ago
9 months ago
8 months ago
5 months ago
7 months ago
6 months ago
7 months ago
6 months ago
8 months ago
9 months ago
9 months ago
6 months ago
9 months ago
10 months ago
10 months ago
6 months ago
9 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
6 months ago
7 months ago
5 months ago
7 months ago
7 months ago
7 months ago
10 months ago
5 months ago
8 months ago
6 months ago
7 months ago
9 months ago
7 months ago
5 months ago
8 months ago
6 months ago
6 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
5 months ago
9 months ago
5 months ago
8 months ago
9 months ago
7 months ago
6 months ago
5 months ago
5 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
9 months ago
7 months ago
6 months ago
5 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago