https://github.com/andreasarvidsson/openwebproject-responsivereact
Responsive layout for React
https://github.com/andreasarvidsson/openwebproject-responsivereact
Last synced: 8 months ago
JSON representation
Responsive layout for React
- Host: GitHub
- URL: https://github.com/andreasarvidsson/openwebproject-responsivereact
- Owner: AndreasArvidsson
- License: mit
- Created: 2020-07-27T09:10:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-27T09:46:42.000Z (over 5 years ago)
- Last Synced: 2025-02-19T06:19:52.394Z (9 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OpenWebProject ResponsiveReact
**Responsive layout for React**
Based upon the size of the screen (or more specifically the browser window) do conditionally rendering. Makes it possible to have different layouts for different screen/window sizes.
## Installation
`npm install owp.responsive-react --save`
## Screen sizes
I'm using the screen sizes as defined by [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
* xs - Extra small devices (portrait phones, less than 576px)
* sm - Small devices (landscape phones, 576px and up)
* md - Medium devices (tablets, 768px and up)
* lg - Large devices (desktops, 992px and up)
* xl - Extra large devices (large desktops, 1200px and up)
## Usage
Add the provider at the top of your application.
```jsx
import { ResponsiveProvider } from "owp.responsive-react";
ReactDOM.render(
,
document.getElementById("root")
);
```
Conditional render based upon screen/window size.
```jsx
import Responsive, { XS, SM, MD, LG, XL } from "owp.responsive-react";
//Render div if screen/window size is md(Medium) or larger.
min md
//Render div if screen/window size is md(Medium) or smaller.
max md
//Render div if screen/window width is 500px or more.
minWidth 500
//Render div if screen/window width is 500px or less.
maxWidth 500
//Render div if screen/window height is 300px or more.
minHeight 300
//Render div if screen/window height is 300px or less.
maxHeight 300
//Render div if screen/window is in portrait mode(height >= width).
isPortrait
//Render div if screen/window is in landscape mode(height < width).
isLandscape
//Render best matching layout based upon screen/window size.
Extra small
Small
Medium
Large
Extra large
//Can be combined with a condition. Will render the best match, but only in portrait mode.
Extra small
Small
Medium
Large
Extra large
```