react-show-at v1.0.0
react-show-at
Build leaner webpages with react-show-at
like Airbnb. 👌
Install
NPM:
npm install react-show-at
How to use
Here is a basic example, how ShowAt
can be used:
import React from 'react';
import ReactDOM from 'react-dom';
import ShowAt from 'react-show-at';
ReactDOM.render(
// "Hello world!" will be hidden on medium screen width and below
<ShowAt breakpoint="mediumAndBelow">
<p>Hello world!</p>
</ShowAt>,
document.getElementById('app')
);
Props
List of props
breakpoint
: This is where you can specify on which screen sizes should the content appear by giving one of the following values:
small
mediumAndBelow
medium
mediumAndAbove
large
Eg.:
...
ReactDOM.render(
<ShowAt breakpoint="medium" />,
document.getElementById('app')
);
NOTE: The value given to breakpoint
prop must be like the ones above, otherwise the prop validation is going to fail❗️
Default breakpoint values
These breakpoint values are inherited from withBreakpoint.
Breakpoint | Value |
---|---|
small | 744 |
medium | 1128 |
large | Infinity |
Overwriting the breakpoints
You can overwrite the breakpoints simply by giving a breakpoints
prop to the instance of withBreakpoint
.
Example:
import React from 'react';
import ReactDOM from 'react-dom';
import ShowAt from 'react-show-at';
// Declare a constant and assign an object to it,
// with the following properties:
const breakpoints = {
small: 479,
medium: 768,
large: 1440
};
ReactDOM.render(
// Overwrite breakpoints here, by passing your breakpoints constant
<ShowAt breakpoint="mediumAndBelow" breakpoints={ breakpoints }>
<p>Hello world!</p>
</ShowAt>,
document.getElementById('app')
);
Related components
Sibling component:
Parent component:
<withBreakpoint(ComponentToBeWrapped) />
Contributions
If you'd like to help, feel free to post an issue and have a discussion about your suggestions!
Background story
Skip this section, if you aren't interested.
As I was reading Adam Neary's article of Rearchitecting Airbnb’s Frontend, two components caught my attention as a junior frontend developer. These were HideAt
and ShowAt
, these components seemed to me easy to 'reverse engineer' 🤓 for a rookie like me, but as it turned I needed to create a HOC as well to be able to share the above two with you, the react community. Airbnb's website and the React dev tool helped me with inspiration along the way.
Licence
MIT
7 years ago