Package Exports

react-socks

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-socks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Socks

Wrap your components with React Socks to prevent unnecessary render in different viewports.

<Breakpoint small down>
  <MyAwesomeMobileMenu>
    This component will render only in mobile devices
  </MyAwesomeMobileMenu>
</Breakpoint>

Why?

Conventionally we have been writing css media queries for different viewports to hide and show elements that are always present in the DOM. With React taking over the world, everything is about rendering components into the DOM. React Socks helps you conditionally render elements based on viewports.

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

Install

$ npm install --save react-socks

Usage

import Breakpoint from 'react-socks';

// ...
<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>

Set Default Breakpoints

You can define your own breakpoints.

Pass an array of objects with the breakpoint name and width in px to setDefaultBreakpoints once in your App.js or your React entry file.

Note: You only need to set default breakpoints once in your app

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>

You can use any breakpoint name (Eg. cats, puppies, dinosaurs, etc) and width.

setDefaultBreakpoints([
  { cats: 0 },
  { dinosaurs: 900 }
]);

<Breakpoint cats only>
    Only cats can render me
</Breakpoint>

If you don't set a default breakpoint, the library will fallback to Bootstrap 4 default breakpoints as described below.

setDefaultBreakpoints([
  { xsmall: 0 }, // all mobile devices
  { small: 576 }, // mobile devices (not sure which one's this big)
  { medium: 768 }, // ipad, ipad pro, ipad mini, etc
  { large: 992 }, // smaller laptops
  { xlarge: 1200 } // laptops and desktops
]);

Breakpoint

Import the Breakpoint component anywhere in the your code and start using it with your breakpoint and modifier props.

// small is breakpoint
// down is modifier
<Breakpoint small down>
  <MyAwesomeMobileMenu>
    This component will render only in mobile devices
  </MyAwesomeMobileMenu>
</Breakpoint>

You have three modifiers

only - will render the component only in the specified breakpoint.
up - will render the component in the specified breakpoint and all the breakpoints above it (greater than the width).
down - will render the component in the specified breakpoint and all the breakpoints below it (less than the width).

react-socks