React Weather Display

This React component provides a basic display of weather information, similar to something that you might see on a weather forecast.

Live Demo

View the live demo! Note that this demo uses pre-compiled code, so it's a little messy to examine.

Installation

npm install react-weather-display

Simple Preview

Props

• width - Set the width of the wrapper div. Defaults to 100%.
• height - Set the height of the wrapper div. Defaults to 100%.
• temperature - The temperature to display
• condition - The condition to display (PropTypes.oneOf(['sunny', 'cloudy', 'rainy', 'stormy', 'snowy']))
• conditions - Optionally overwrite the available conditions and the image they will use.
• opacity - The value to use for the wrapper opacity when isVisible is true.
• isVisible - Sets the wrapper div to opacity to this.props.opacity or 0.
• transition - Optionally override the transition used on the wrapper div.
• textShadow - Optionally override the textShadow property on the temperature. Defaults to "1px 1px 1px rgba(50,50,50,0.8)"
• wrapperStyle - Optionally add to the wrapper div's style properties.
• conditionStyle - Optionally add to the div which displays the weather condition image.
• temperatureStyle - Optionally add to the div which displays the current temperature.

currentTemperature and currentCondition are also supported for backwards compatibility with the original version of the package.

Conditions

While you can overwrite the conditions that are available, the default conditions are setup as shown below. The function is ran during construction or if the conditions prop is updated. The backgroundImage prop will wrap the given value with url() if the value is an URL and is not already wrapped.

const getDefaultConditions = conditions => ({
  sunny:   'https://raw.githubusercontent.com/KevinMellott91/react-weather-display/master/images/sunny.png',
  cloudy:  'https://raw.githubusercontent.com/KevinMellott91/react-weather-display/master/images/cloudy.png',
  rainy:   'https://raw.githubusercontent.com/KevinMellott91/react-weather-display/master/images/rain.png',
  stormy:  'https://raw.githubusercontent.com/KevinMellott91/react-weather-display/master/images/tstorms.png',
  snow:    'https://raw.githubusercontent.com/KevinMellott91/react-weather-display/master/images/snow.png',
  default: 'https://raw.githubusercontent.com/KevinMellott91/react-weather-display/master/images/mostlysunny.png',
  ...conditions
})

Example Usage

You can run built-in demo example via few simple steps:

1. git clone https://github.com/KevinMellott91/react-weather-display.git
   
2. cd react-weather-display
   
3. npm install
   
4. npm run-script basic-example
   
5. Browse to http://localhost:3000

Inspiration

The weather condition images were originally created by Jean-Jacques Rossouw, and we were inspired to incorporate them into this control.