https://github.com/andreasarvidsson/openwebproject-responsivereact

Responsive layout for React
https://github.com/andreasarvidsson/openwebproject-responsivereact

Last synced: about 1 month 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 4 years ago)
• Default Branch: master
• Last Pushed: 2020-07-27T09:46:42.000Z (over 4 years ago)
• Last Synced: 2024-09-26T07:58:53.167Z (about 2 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


```