I have a div with display:flex but I want in mobile size (actually in special media query) change display to block
<Col sm={8}>
<div className="d-flex">
<Col md={4} xs={12} className="has-float-label p-0">
<Label>years</Label>
<Select
components={{ Input: CustomSelectInput }}
className="react-select w-full"
classNamePrefix="react-select"
value={selectedDate.year}
onChange={(value) => setSelectedDate({ ...selectedDate, year: value })}
options={years}
placeholder=""
/>
</Col>
</div>
</Col>You could create a custom hook for that so you can reuse it as needed, let's call it useScreenSize for example:
const [screenSize, setScreenSize] = useState(undefined);
const handleResize = () => setScreenSize(window.innerWidth);
useEffect(() => {
window.addEventListener("resize", handleResize);
handleResize();
return () => window.removeEventListener("resize", handleResize)
}, [])
return screenSize;
Then in your component(s), you could use the value returned from this hook to specify which classes you want to apply, for example, if the screen's width is let's say 600px (or the breakpoint on which you actually want to change your classes), then you can apply your class based on that.
Let me know if that helps.