Mediaquery with Reactjs inline CSS

Question

Wondering if there is a way to do @media query within react component. I think having inline style make a lot sense doing components.

i know there is a solution with http://projects.formidablelabs.com/radium/. but is there a way to archive without the lib.

Thanks for any great suggestions

use [`window.matchMedia()`](https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia)? — Lucius, Oct 28 '15 at 04:22
@LiYinKong thanks mate one nice choice (IE 9 not support, which is pain) — Bill, Oct 28 '15 at 04:45

score 1 · Answer 1 · answered Sep 26 '22 at 06:42

I found this answer in this link. I have no credit. link: https://stackoverflow.com/a/68606754/14765047

import React, { useState, useEffect } from 'react';

const App = () => {
  const [matches, setMatches] = useState(
    window.matchMedia("(min-width: 768px)").matches
  )

  useEffect(() => {
    window
    .matchMedia("(min-width: 768px)")
    .addEventListener('change', e => setMatches( e.matches ));
  }, []);

  return (
    <div >
      {matches && (<h1>Big Screen</h1>)}
      {!matches && (<h3>Small Screen</h3>)}
    </div>
  );
}

export default App;

score 0 · Accepted Answer · answered Feb 15 '16 at 05:08

0

i found this answer myself: https://github.com/gajus/react-css-modules combine with webpack css-loader can be very nice :)

answered Feb 15 '16 at 05:08

Bill

17,872
19
83
131

Mediaquery with Reactjs inline CSS

2 Answers2