Search code examples
storybook

Mock hover state in Storybook?

I have a hover style in my component: 

const style = css`
  color: blue;

  &:hover {
    color: red;
  }
`;

Can you mock this in Storybook so that it can be shown without having to manually hover over the component?

Solution

  • Since in Storybook you need to show the component hover appearance, rather than correctly simulate the hover related stuff,

    the first option is to add a css class with the same style as :hover :

    // scss
.component {
  &:hover, &.__hover {
    color: red;
  }
}

// JSX (story)
const ComponentWithHover = () => <Component className="component __hover">Component with hover</Component>

    the second one is to use this addon.