https://github.com/kimmelsg/cj-resized

Return different values based on browser width
https://github.com/kimmelsg/cj-resized

media media-queries react width

Last synced: 3 months ago
JSON representation

Return different values based on browser width

• Host: GitHub
• URL: https://github.com/kimmelsg/cj-resized
• Owner: kimmelsg
• Created: 2017-08-23T15:40:14.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-26T20:19:28.000Z (over 7 years ago)
• Last Synced: 2025-07-28T12:38:07.016Z (3 months ago)
• Topics: media, media-queries, react, width
• Language: JavaScript
• Size: 36.1 KB
• Stars: 33
• Watchers: 5
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## React Resized

[![CircleCI](https://circleci.com/gh/navjobs/resized.svg?style=svg)](https://circleci.com/gh/navjobs/resized)

[![Coverage Status](https://coveralls.io/repos/github/navjobs/resized/badge.svg?branch=master&t=VOxE00)](https://coveralls.io/github/navjobs/resized?branch=master)

## Install

```js

npm install react-resized --save

```

## Usage

```js

import Media from 'react-resized'

const Test = props => (

  

)

export default Media(Test)(

  props => [

    props.small,

    props.medium,

    props.large

  ]

)

```

The correct size image will be loaded according to the browser size. Default widths are: `0, 767, 1023`. The size closest to the current browser width, that isn't greater than the current width, will be returned. You can optionally pass in custom sizes as the second parameter:

```js

Media(Test)(

  props => ({

    '0': props.small,

    '500': props.medium,

    '1000': props.large

  })

)

```

That's it!