Last active
July 15, 2022 19:25
-
-
Save hsnmrd/8a4e9195a7479fb46066d019b0d95815 to your computer and use it in GitHub Desktop.
controll breakpoints in reactJs (using redux)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {createSlice, PayloadAction} from "@reduxjs/toolkit"; | |
| export enum ScreenSize { | |
| desktopLargeXXX = 1921, | |
| desktopLargeXX = 1919, | |
| desktopLargeX = 1500, | |
| desktopLarge = 1350, | |
| desktopNormal = 1200, | |
| desktopMiddle = 1100, | |
| tablet = 991, | |
| mobile = 767, | |
| normalMobile = 479, | |
| smallMobile = 400, | |
| extraSmallMobile = 360 | |
| } | |
| type stateType = { | |
| status: "idle" | "loading", | |
| size: ScreenSize, | |
| originalSize: number | |
| } | |
| function calculateScreenSize(size: number) { | |
| if (size >= ScreenSize.desktopLargeXXX) return ScreenSize.desktopLargeXXX | |
| else if (size >= ScreenSize.desktopLargeXX) return ScreenSize.desktopLargeXX | |
| else if (size >= ScreenSize.desktopLargeX) return ScreenSize.desktopLargeX | |
| else if (size >= ScreenSize.desktopLarge) return ScreenSize.desktopLarge | |
| else if (size >= ScreenSize.desktopNormal) return ScreenSize.desktopNormal | |
| else if (size >= ScreenSize.desktopMiddle) return ScreenSize.desktopMiddle | |
| else if (size >= ScreenSize.tablet) return ScreenSize.tablet | |
| else if (size >= ScreenSize.mobile) return ScreenSize.mobile | |
| else if (size >= ScreenSize.normalMobile) return ScreenSize.normalMobile | |
| else if (size >= ScreenSize.smallMobile) return ScreenSize.smallMobile | |
| else return ScreenSize.extraSmallMobile | |
| } | |
| const BreakPointSlice = createSlice({ | |
| name: "ResizeScreenSlice", | |
| initialState: { | |
| status: 'idle', | |
| size: ScreenSize.desktopLargeXXX, | |
| originalSize: ScreenSize.desktopLargeXXX | |
| } as stateType, | |
| reducers: { | |
| actionChangeCurrentSize: (state, action: PayloadAction<{ size: number }>) => { | |
| state.size = calculateScreenSize(action.payload.size) | |
| state.originalSize = action.payload.size | |
| } | |
| } | |
| }); | |
| export const breakPointSlice = BreakPointSlice.reducer; | |
| export const {actionChangeCurrentSize} = BreakPointSlice.actions; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {useEffect, useState} from "react"; | |
| import {actionChangeCurrentSize, ScreenSize} from "../store/slice/ui/BreakPointSlice"; | |
| import {useAppDispatch} from "../store/base/reduxHook"; | |
| export function ResizeListener() { | |
| const [windowWidth, setWindowWidth] = useState(ScreenSize.desktopLargeXXX) | |
| const dispatch = useAppDispatch() | |
| function resizeWindow() { | |
| setWindowWidth(window.innerWidth) | |
| } | |
| useEffect(() => { | |
| resizeWindow() | |
| window.addEventListener("resize", resizeWindow) | |
| }, []) | |
| useEffect(() => { | |
| dispatch(actionChangeCurrentSize({size: windowWidth})) | |
| }, [windowWidth]) | |
| return <></> | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment