Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flexdinesh/react-socks
🎉 React library to render components only on specific viewports 🔥
https://github.com/flexdinesh/react-socks
breakpoints library media-queries react viewport
Last synced: about 2 months ago
JSON representation
🎉 React library to render components only on specific viewports 🔥
- Host: GitHub
- URL: https://github.com/flexdinesh/react-socks
- Owner: flexdinesh
- License: mit
- Created: 2018-11-06T10:03:06.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-07T16:47:19.000Z (6 months ago)
- Last Synced: 2024-07-18T15:10:07.674Z (2 months ago)
- Topics: breakpoints, library, media-queries, react, viewport
- Language: JavaScript
- Homepage:
- Size: 1.54 MB
- Stars: 425
- Watchers: 13
- Forks: 29
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-socks
README
# React Socks
[](https://travis-ci.org/flexdinesh/react-socks)
[](https://www.npmjs.com/package/react-socks)
[](https://david-dm.org/flexdinesh/react-socks)
[](https://opensource.org/licenses/MIT)
Wrap your components with **React Socks** to prevent unnecessary render in different viewports.
```jsx
This component will render only in mobile devices
```
## Why? [](http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action)
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.
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
## Install
```sh
$ npm install --save react-socks
```
## Usage
Just wrap your top level component with `BreakpointProvider` and use the `Breakpoint` component anywhere you need.
_Note: `BreakpointProvider` was introduced only in `v1.0.0`. It's not available in previous alpha versions._
```jsx
import { Breakpoint, BreakpointProvider } from 'react-socks';
// entry file (usually App.js or index.js)
const App = () => (
);
```
```jsx
// Example.js
const Example = () => {
return (
I will render only in mobile devices
I will render only in tablets (iPad, etc...)
I will render in tablets (iPad, etc...) and everything below (mobile devices)
I will render in tablets (iPad, etc...) and everything above (laptops, desktops)
I will render in laptops, desktops and everything above
{/* Add breakpoints on the fly using custom queries */}
Custom breakpoint: (min-width : 500px)
Custom breakpoint: (max-width : 1000px)
Custom breakpoint: (min-width : 500px) && (max-width : 700px)
);
};
```
## API
- [setDefaultBreakpoints](#set-default-breakpoints)
- [setDefaultWidth](#set-default-width)
- [Breakpoint](#breakpoint)
- [useCurrentWidth](#use-current-width--breakpoint-name) / [useCurrentBreakpointName](#use-current-width--breakpoint-name)
### 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**
```jsx
import { setDefaultBreakpoints } from 'react-socks';
setDefaultBreakpoints([
{ xs: 0 },
{ s: 376 },
{ m: 426 },
{ l: 769 },
{ xl: 1025 }
]);
I will render only in m devices
```
- You can use any breakpoint name (Eg. cats, puppies, dinosaurs, etc) and width.
```jsx
setDefaultBreakpoints([
{ cats: 0 },
{ dinosaurs: 900 }
]);
Only cats can render me
```
- If you don't set a default breakpoint, the library will fallback to **Bootstrap 4 default breakpoints** as described below.
```jsx
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
]);
```
### Set Default Width
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.
- Pass **width** in _px_ to `setDefaultWidth` **once** in your `App.js` or your React entry file.
**Note: You only need to set default width once in your app**
```jsx
import { setDefaultWidth } from 'react-socks';
setDefaultWidth(992); // render desktop components in the server
```
### Breakpoint
Import the `Breakpoint` component anywhere in the your code and start using it with your **breakpoint** and **modifier** props.
```jsx
// small is breakpoint
// down is modifier
This component will render only in mobile devices
```
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).
### Custom Breakpoints 🆕
Now, you can add a breakpoint of any width by using this prop: `customQuery`.
Simply write your media query as a _string_ and pass it to `customQuery`
```jsx
Custom breakpoint: (min-width : 500px)
Custom breakpoint: (max-width : 1000px)
Custom breakpoint: (min-width : 500px) && (max-width : 700px)
```
**Note: `customQuery` will be ignored if you have mentioned any modifiers like `up`, `down` & `only`**
Use `customQuery` only if you want to make use of arbitary breakpoints.
### Use Current Width / Breakpoint Name
If you call `useCurrentWidth` in the render function, you can access the current width directly:
```jsx
import { useCurrentWidth } from 'react-socks'
const CustomComponent = () => {
const width = useCurrentWidth()
if (width < 500) {
return
Hello!
} else {
return Hello!
}
}
```
You can also use the current breakpoint name with `useCurrentBreakpointName`:
```jsx
import { useCurrentBreakpointName } from 'react-socks'
const CustomComponent = () => {
const breakpoint = useCurrentBreakpointName()
if (breakpoint == 'small') {
return
Hello!
} else {
return Hello!
}
}
```
## Contributors
Thanks goes to these amazing people 🎉
| [
Dinesh Pandiyan](https://github.com/flexdinesh)
| [
Capelo](https://github.com/antoniocapelo)
| [
Adarsh](https://github.com/sadarshannaiynar)
| [
Patryk](https://github.com/PatrykRudzinski)
| [
WRNGFRNK](https://github.com/wrngfrnk)
| [
Farhad Yasir](https://github.com/nutboltu)
| :---: | :---: | :---: | :---: | :---: | :---: |
| [
Entkenntnis](https://github.com/Entkenntnis)
| [
Douglas Moore](https://github.com/dbryantm)
| [
Abdul rehman](https://github.com/rehman-00001)
| [
Nawaz Khan](https://github.com/nawazkhan)
| [
hems.io](https://github.com/hems)
## License
MIT © Dinesh Pandiyan