Skip to content

added info about emit() function #24296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jonniebigodes merged 7 commits into from
Oct 6, 2023
Merged

added info about emit() function #24296

Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cc55c3d
added info about emit() function
ATREAY Sep 25, 2023
7da1046
Merge branch 'next' into storybook
jonniebigodes Oct 3, 2023
1073829
Merge branch 'next' into storybook
ATREAY Oct 4, 2023
eec9eeb
Merge branch 'next' into storybook
ATREAY Oct 5, 2023
c78267a
Merge branch 'next' into storybook
ATREAY Oct 6, 2023
0e0d01b
updated changes
ATREAY Oct 6, 2023
1d52a86
updated alignment changes
ATREAY Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion docs/essentials/highlight.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ To highlight DOM elements with the addon, you'll need to emit the `HIGHLIGHT` ev

</div>

<div class="aside">

ℹ️ The `emit` function derived from the `useChannel` API hook creates a communication channel in Storybook's UI to listen for events and update the UI accordingly. The Highlight addon uses this channel to listen to custom events and update the highlighted elements (if any) accordingly.

</div>

### Reset highlighted elements

Out of the box, Storybook automatically removes highlighted elements when transitioning between stories. However, if you need to clear them manually, you can emit the `RESET_HIGHLIGHT` event from within a story or an addon. For example:
Expand Down Expand Up @@ -70,4 +76,4 @@ By default, the addon applies a standard style to the highlighted elements you'v
]}
/>

<!-- prettier-ignore-end -->
<!-- prettier-ignore-end -->