I want the className should be added or removed automatically when the screen size changes.
I tried using media queries, but that didn't really work for me. In my stylesheet I have predefined classes for example:
.bold { font-weight: bold;}
and this classes cannot be added or removed using media queries.
Attach a resize event handler to window, then you can check the screen size and use that to update state. Then in render, you should check state to tell whether or not the new class should be added or removed:
componentDidMount() {
window.addEventListener('resize', () => {
this.setState({
isMobile: window.innerWidth < 1200
});
}, false);
}
render() {
const className = this.state.isMobile ? 'mobile' : '';
return (
<Component className={className} />
)
}
componentWillUnmount function to remove the listener otherwise it will keep erroring
If you're looking to do this with hooks instead of classes, here is a simple example for this case:
const [isMobile, setIsMobile] = useState(window.innerWidth < 1200);
{/* Performs similarly to componentDidMount in classes */}
useEffect(() => {
window.addEventListener("resize", () => {
const ismobile = window.innerWidth < 1200;
if (ismobile !== isMobile) setIsMobile(ismobile);
}, false);
}, [isMobile]);
{/* There is no need for a render function with Hooks */}
return (
<p className={`${isMobile ? "mobile-class" : "non-mobile-class"}`}>Your text here</p>
);
For a more in-depth explanation of the useEffect hook, check out the official React documentation here. Please note that you must be using React 16.8 or higher to take advantage of hooks.
the solution above is firing the event every time you resize, perhaps something like this would be a better option:
const mediaQuery: string = "(min-width: 768px)";
const mediaQueryMatch = window.matchMedia(mediaQuery);
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const handleClassByMediaQuery = (event: { matches: any }) => {
const isMobile = event.matches;
return setIsMobile(isMobile);
};
mediaQueryMatch.addEventListener("change", handleClassByMediaQuery);
return () => {
mediaQueryMatch.removeEventListener("change", handleClassByMediaQuery);
};
}, [isMobile, mediaQueryMatch]);
the solution above Which one? The other answers are not always "above". Sure, they are while you type your answer - but then they're sorted in the page once posted. Criteria are "Trending", "Highest score", "Date modified", "Date created". Your answer is placed in the page according to this parameter.