kimmelsg / cj-resized

Return different values based on browser width

React Resized

Install

npm install react-resized --save

Usage

import Media from 'react-resized'

const Test = props => (
  <img src={props.media} />
)

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:

Media(Test)(
  props => ({
    '0': props.small,
    '500': props.medium,
    '1000': props.large
  })
)

That's it!