• Home
  • Responsive React Components with React Socks

Responsive React Components with React Socks

Recently I find some interesting library for React. This library is used to wrap your components to prevent unnecessary render in different viewports. So what does that mean. React is awesome and the whole world agrees to it. Development is a whole lot faster and easier when we look at everything as components. With React taking over the world, everything is about rendering components into the DOM. Everything is written in JavaScript and React renders only the code that is necessary based on application’s state.  If you lazy load your components, you load only what’s necessary for the user and I think that is the biggest thing in React.

Why to use React Socks?

React Socks wraps your components comfortably to prevent unnecessary render in various viewports

Let’s see what happens if we write media queries in React components. We basically render components inside and based on viewport size we use css to hide them. See example:

import React from 'react';
import './Example.style.scss';

const Example = () => {
  return (
    <div className="example">
      <div className="mobile-only">I'm a fancy mobile div</div>
      <div className="desktop-only">I'm a heavy desktop div</div>
    </div>
  );
};

and scss file:

.example {
  .mobile-only {
    @media (min-width: 768px){
      display: none;
    }
  }
  .desktop-only {
    @media (max-width: 767px){
      display: none;
    }
  }
}

As we see above when we render component example both mobile-only and desktop-only elements will be rendered also to DOM. So how can we avoid this. In smaller apps that won’t have to be a problem, but if you have very large enterprise app size of every component is important.

With React Socks you can:

  1. Render viewport specific components without hassle
  2. You can define your own breakpoints (Eg. xs, ipad, bigmonitors) and use them
  3. You can improve your app performance if you lazy load your viewport specific components
  4. Simpler and sweeter syntax for ease of use

How to use:

npm install --save react-socks

After that you can wrap elements:

import Breakpoint from 'react-socks';

const Example = () => {
  return (
    <div>
      <Breakpoint small down>
        <div>I will render only in mobile devices</div>
      </Breakpoint>

      <Breakpoint medium only>
        <div>I will render only in tablets (iPad, etc...)</div>
      </Breakpoint>

      <Breakpoint medium down>
        <div>I will render in tablets (iPad, etc...) and everything below (mobile devices)</div>
      </Breakpoint>

      <Breakpoint medium up>
        <div>I will render in tablets (iPad, etc...) and everything above (laptops, desktops)</div>
      </Breakpoint>

      <Breakpoint large up>
        <div>I will render in laptops, desktops and everything above</div>
      </Breakpoint>
    </div>
  );
};

Also you can specify your own breakpoints (as many as you want ):

import { setDefaultBreakpoints } from 'react-socks';

setDefaultBreakpoints([
  { xs: 0 },
  { s: 376 },
  { m: 426 },
  { l: 769 },
  { xl: 1025 }
]);

<Breakpoint m only>
    I will render only in m devices
</Breakpoint>

So, as you see in app we render only necessary elements based on viewport size…

Thanks for reading…

Tags: ,

Copyright by Kristijan Klepač 2018