docs(theming): clean up event listeners in React demos (#3684)

ionic-team · Jun 3, 2024 · ca5789f · ca5789f
1 parent e4007be
commit ca5789f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 5 deletions.
diff --git a/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md b/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md
@@ -33,8 +33,16 @@ function Example() {
 
     toggleDarkTheme(prefersDark.matches);
 
+    const setDarkThemeFromMediaQuery = (mediaQuery: MediaQueryListEvent) => {
+      toggleDarkTheme(mediaQuery.matches);
+    };
+
     // Listen for changes to the prefers-color-scheme media query
-    prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
+    prefersDark.addEventListener('change', setDarkThemeFromMediaQuery);
+
+    return () => {
+      prefersDark.removeEventListener('change', setDarkThemeFromMediaQuery);
+    };
   }, []);
 
   return (

diff --git a/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md b/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md
@@ -49,8 +49,16 @@ function Example() {
     // value of the prefers-color-scheme media query
     initializeDarkTheme(prefersDark.matches);
 
+    const setDarkThemeFromMediaQuery = (mediaQuery: MediaQueryListEvent) => {
+      initializeDarkTheme(mediaQuery.matches);
+    };
+
     // Listen for changes to the prefers-color-scheme media query
-    prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches));
+    prefersDark.addEventListener('change', setDarkThemeFromMediaQuery);
+
+    return () => {
+      prefersDark.removeEventListener('change', setDarkThemeFromMediaQuery);
+    };
   }, []);
 
   return (

diff --git a/static/usage/v8/theming/class-dark-mode/react/main_tsx.md b/static/usage/v8/theming/class-dark-mode/react/main_tsx.md
@@ -49,8 +49,16 @@ function Example() {
     // value of the prefers-color-scheme media query
     initializeDarkPalette(prefersDark.matches);
 
+    const setDarkPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => {
+      initializeDarkPalette(mediaQuery.matches);
+    };
+
     // Listen for changes to the prefers-color-scheme media query
-    prefersDark.addEventListener('change', (mediaQuery) => initializeDarkPalette(mediaQuery.matches));
+    prefersDark.addEventListener('change', setDarkPaletteFromMediaQuery);
+
+    return () => {
+      prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery);
+    };
   }, []);
 
   return (

diff --git a/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md b/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md
@@ -66,9 +66,22 @@ function Example() {
     initializeDarkPalette(prefersDark.matches);
     initializeHighContrastPalette(prefersHighContrast.matches);
 
+    const setDarkPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => {
+      initializeDarkPalette(mediaQuery.matches);
+    };
+
+    const setHighContrastPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => {
+      initializeHighContrastPalette(mediaQuery.matches);
+    };
+
     // Listen for changes to the media queries
-    prefersDark.addEventListener('change', (mediaQuery) => initializeDarkPalette(mediaQuery.matches));
-    prefersHighContrast.addEventListener('change', (mediaQuery) => initializeHighContrastPalette(mediaQuery.matches));
+    prefersDark.addEventListener('change', setDarkPaletteFromMediaQuery);
+    prefersHighContrast.addEventListener('change', setHighContrastPaletteFromMediaQuery);
+
+    return () => {
+      prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery);
+      prefersHighContrast.removeEventListener('change', setHighContrastPaletteFromMediaQuery);
+    };
   }, []);
 
   return (