- Notifications
You must be signed in to change notification settings - Fork27
🎉 React library to render components only on specific viewports 🔥
License
flexdinesh/react-socks
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Wrap your components withReact Socks to prevent unnecessary render in different viewports.
<Breakpointsmalldown><MyAwesomeMobileMenu> This component will render only in mobile devices</MyAwesomeMobileMenu></Breakpoint>
Conventionally we have been writingcss 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 andsweeter syntax for ease of use
$ npm install --save react-socks
Just wrap your top level component withBreakpointProvider and use theBreakpoint component anywhere you need.
Note:BreakpointProvider was introduced only inv1.0.0. It's not available in previous alpha versions.
import{Breakpoint,BreakpointProvider}from'react-socks';// entry file (usually App.js or index.js)constApp=()=>(<BreakpointProvider><Example/></BreakpointProvider>);
// Example.jsconstExample=()=>{return(<div><Breakpointsmalldown><div>I will render only in mobile devices</div></Breakpoint><Breakpointmediumonly><div>I will render only in tablets (iPad, etc...)</div></Breakpoint><Breakpointmediumdown><div>I will render in tablets (iPad, etc...) and everything below (mobile devices)</div></Breakpoint><Breakpointmediumup><div>I will render in tablets (iPad, etc...) and everything above (laptops, desktops)</div></Breakpoint><Breakpointlargeup><div>I will render in laptops, desktops and everything above</div></Breakpoint>{/* Add breakpoints on the fly using custom queries */}<BreakpointcustomQuery="(min-width: 500px)"><divstyle={{backgroundColor:'red'}}> Custom breakpoint: (min-width : 500px)</div></Breakpoint><BreakpointcustomQuery="(max-width: 1000px)"><divstyle={{backgroundColor:'yellow'}}> Custom breakpoint: (max-width : 1000px)</div></Breakpoint><BreakpointcustomQuery="(min-width: 500px) and (max-width: 700px)"><divstyle={{backgroundColor:'lightblue'}}> Custom breakpoint: (min-width : 500px)&&(max-width :700px)</div></Breakpoint></div>);};
You can define your own breakpoints.
- Pass an array of objects with thebreakpoint name andwidth inpx to
setDefaultBreakpointsonce in yourApp.jsor 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}]);<Breakpointmonly> 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}]);<Breakpointcatsonly> Only cats can render me</Breakpoint>
- If you don't set a default breakpoint, the library will fallback toBootstrap 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]);
You can define your own default width. This will help when you want to render a particular default width from the server. Usually in the server, there are no breakpoints and the lib defaults to 0 and renders mobile views. Use this API to change that.
- Passwidth inpx to
setDefaultWidthonce in yourApp.jsor your React entry file.
Note: You only need to set default width once in your app
import{setDefaultWidth}from'react-socks';setDefaultWidth(992);// render desktop components in the server
Import theBreakpoint component anywhere in the your code and start using it with yourbreakpoint andmodifier props.
// small is breakpoint// down is modifier<Breakpointsmalldown><MyAwesomeMobileMenu> This component will render only in mobile devices</MyAwesomeMobileMenu></Breakpoint>
You havethree modifiers
only - will render the componentonly in the specified breakpoint.
up - will render the componentin the specified breakpoint and all the breakpointsabove it (greater than the width).
down - will render the componentin the specified breakpoint and all the breakpointsbelow it (less than the width).
Now, you can add a breakpoint of any width by using this prop:customQuery.Simply write your media query as astring and pass it tocustomQuery
<BreakpointcustomQuery="(min-width: 500px)"><divstyle={{backgroundColor:'red'}}> Custom breakpoint: (min-width : 500px)</div></Breakpoint><BreakpointcustomQuery="(max-width: 1000px)"><divstyle={{backgroundColor:'yellow'}}> Custom breakpoint: (max-width : 1000px)</div></Breakpoint><BreakpointcustomQuery="(min-width: 500px) and (max-width: 700px)"><divstyle={{backgroundColor:'lightblue'}}> Custom breakpoint: (min-width : 500px)&&(max-width :700px)</div> </Breakpoint>
Note:customQuery will be ignored if you have mentioned any modifiers likeup,down &only
UsecustomQuery only if you want to make use of arbitary breakpoints.
If you calluseCurrentWidth in the render function, you can access the current width directly:
import{useCurrentWidth}from'react-socks'constCustomComponent=()=>{constwidth=useCurrentWidth()if(width<500){return<h1>Hello!</h1>}else{return<h2>Hello!</h2>}}
You can also use the current breakpoint name withuseCurrentBreakpointName:
import{useCurrentBreakpointName}from'react-socks'constCustomComponent=()=>{constbreakpoint=useCurrentBreakpointName()if(breakpoint=='small'){return<h1>Hello!</h1>}else{return<h2>Hello!</h2>}}
Thanks goes to these amazing people 🎉
Dinesh Pandiyan | Capelo | Adarsh | Patryk | WRNGFRNK | Farhad Yasir |
|---|---|---|---|---|---|
Entkenntnis | Douglas Moore | Abdul rehman | Nawaz Khan | hems.io |
MIT © Dinesh Pandiyan
About
🎉 React library to render components only on specific viewports 🔥
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors11
Uh oh!
There was an error while loading.Please reload this page.