A "on story change" type of feature

Is your feature request related to a problem? Please describe. I had to build a feature that is responsive to browser size change, so I had to do

        $("html").width("100%");
	$("html").height("100%");
	$("body").width("100%");
	$("body").height("100%");
	$("#root").width("100%");
	$("#root").height("100%");

so that the subsequent rendered components would be able to do the same and change size via simple css. I know that there are viewport feature, maybe I was just doing it wrong, but didn’t see the same, probably the only viable, effect as my code did.

I need the feature so that I could remove these CSS rules to prevent possible effect on other and future features.

Describe the solution you’d like A hook that can do “on story change run this function”. Maybe it could be the third argument for .add in storiesOf(“something”, module).add(“name”, component, onChangeFunction). The onChangeFunction would be where I’d write my custom function.

Basically a mimic of “onComponentDismount”.

Describe alternatives you’ve considered personally, making the iframe html to be 100% for width and height could work for me.

I could see that others may have better use of my requested feature though.

Are you able to assist bring the feature to reality? nope

[dperetti]

You can achieve build up / tear down like this:

// in preview.ts
export const decorators = [
  (story) => {
    useEffect(() => {
      // build up
      return () => {
        // tear down
      }
    }, [])
    return story()
  },
]

[fredrikbergqvist]

@shilman Alright, I guess a global decorator is the way to solve this then instead of a “build up/tear down”-pattern. Thanks!