Readme gif

README.md

@@ -4,6 +4,8 @@ Greatly inspired by [@storybook/addon-backgrounds](https://github.com/storybooks
 
 This Storybook Theme Decorator can be used to add a custom HTML class or classes to the the preview in [Storybook](https://storybook.js.org).
 
+![Demo](media/demo.gif)
+
 ## Compatibility
 
 This version is compatible with storybook version `5.3.x`.

src/decorators/react.tsx

@@ -15,6 +15,7 @@ interface Props {
 
 export const ThemeDecorator: React.FC<Props> = (props) => {
   const { children, config, store } = props;
+  const channel = addons.getChannel();
 
   const [storeTheme, setTheme] = useState<string>(store.get('theme'));
   const themeName = storeTheme || getSelectedTheme(config.list);
@@ -29,13 +30,11 @@ export const ThemeDecorator: React.FC<Props> = (props) => {
 
   useEffect(() => {
     const updateStore = (theme: string) => store.set('theme', theme);
-    const channel = addons.getChannel();
     channel.on(CHANGE, updateStore);
     return () => channel.removeListener(CHANGE, updateStore);
   }, [store]);
 
   useEffect(() => {
-    const channel = addons.getChannel();
     channel.emit(THEME, themeName);
   }, [themeName]);