×
  • React – The Complete Guide (incl. React Router 4 & Redux)

  • 31 – Radium For Media Queries In React

    Lesson List
    [ Radium For Media Queries In React, Radium For Media Queries In React ]

    In the last lesson, we added Radium and started using it into our button and added a pseudo selector i.e. the :hover pseudo-selector. that’s, of course, nice but we can also use radium to use media queries.
    Now although in the person Component there we have a Person class in src/Persons/Persons.css we could of course easily add a media query. But I want to show you can do that with Radium package that we installed in our application, there might be some situation where you have to change CSS dynamically.

    Radium For Media Queries In React

    First we will import the Radium package into our component and export with its method Radium().

    src/Person/Person.js
    
    ...
    import Radium from 'radium';
    ...
    const person = props => {
      // component JSX code
    }
    export default Radium(person);
    

    Adding Media Query In React Component

    After that will add a new style const style = { } in Person.js.
    Now again we will use a special selector which will look really strange but which works thanks to the Radium

    src/Person/Person.js
    
    ...
    import Radium from 'radium';
    ...
    const person = props => {
      const style = {
          '@media (min-width: 500px)': {    // still it's a javascript property name.
            ...
          }
      }
      ...
    }
    export default Radium(person);
    

    @media (min-width: 500px) : Since it’s a string it is valid and radium will parse it and of course understand it because it’s a media query and among pseudo selectors it is something radium understands.

    Adding Styles in Media Query

    Now inside our media query object we could simply add some properties to style our component.

    src/Person/Person.js
    
    import React from 'react';
    import Radium from 'radium';
    import './Person.css';
    const person = props => {
    	const style = {
    		'@media (min-width: 500px)': {
    			width: '450px',
    		},
    	};
    	return (
    		<div className="Person" style={style}>
    		...
    		</div>
    	);
    };
    export default Radium(person);
    

    as we can see we have a className added in our JSX code, But I also have my style which will override my class setting by default CSS rules not because of Radium.
    Now if we run the application and toggle the button you will see an error i.e.

    Uncaught Error: To use plugins requiring `addCSS`

    We need to wrap our application in a style root component. This is a component made available by Radium and while wrapping the export wth radium is enought or is pseudo selectors for basically transforming select ot select media qieries or else animations with keyFrames.

    Wrapping Application in Radium Component

    We need to wrap the entire application in a special component provided by radium.

    src/App.js
    
    import Radium, {StyleRoot} from 'radium';
    

    We can simply import styleRoot from radium , we are importing the default export of that file i.e. Radium and then we import a named export styleRoot.
    After that we can simply wrap our whole application with that. So what we can do is we can smply go in return statement and simply wrap <StyleRoot>

    src/App.js
    
    ...
    import Radium, {StyleRoot} from 'radium';
    ...
    class App extends Component {
      ...
      return (
    		<StyleRoot>
    			<div className="App">
    				...
    			</div>
    		</StyleRoot>
    	);
    }
    ...
    

    Now If you save the file and run the application you will se it will work fine without any errors and you can see the the media query is been applied by resizing your browser window.

    Important:
    Wrap your entire application in the root component only there with the <StyleRoot> component provided by radium so that you can safely access advanced features to call it like media queries.
    For pseudo selector, you don’t need to do that whichever feature you use, you have to wrap a component when you plan on using radium features.
    tou
    React introduction
    React Component
    Radium For Media Queries In React

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept