react-weather-forecast
Collection of react components used to display weather at any location.
List of used components
- WeatherList - lists weather-related values such as rain or snow
- WeatherConditions - lists single or multiple (boolean param list) weather phenomena with localized description and icons
- WeatherGraph - experimental english only simple graph display
- weatherEnhancer - injects weather information into any of your compoments (props added: data)
Examples of use
Component setup
// Set up global configuration for weather components<WeatherGlobal apiKey={state.setApiKey} by="day" from={new Date()} to={threeDaysLater} loadingHandler={() => <div>Loading...</div>} errorHandler={() => <div>Error!</div>} storage={localStorage} dateHandler={date => <span>{date.toLocaleDateString() + " " + date.toLocaleTimeString()}</span>} units="metric" lang="cz"> {/* List how much it rains in Prague */} {<WeatherList kind="names" names={["Prague"]} type="rain" />} {/* List what kind of weather is in Prague */} {<WeatherConditions kind="geo" lat={50.073658} lon={14.418540} list />} {/* List only cloudy types of weather */} {<WeatherConditions kind="geo" lat={50.073658} lon={14.418540} type="Clouds" />} {/* List temperature in Prague */} {<WeatherGraph kind="ids" ids={[3067696]} type="clouds" label="Temperature" />} {/* List temperature with custom extended component */} {<ExtendedTemperatureInfo label="Temp" />} {/* List weather phenomena with custom extended component */} {<ExtendedWeatherInfo label="Weather list" />}</WeatherGlobal>
Enhancer use
export interface ExtendedTemperatureProps extends InfoQueryEnhancerProps { label: string;} const ExtendedTemperature: FunctionComponent<ExtendedTemperatureProps> = props => ( <div> <h3> {props.label} </h3> <ul> {props.data.map(result => <li>{result.value}</li>)} </ul> </div>); export default weatherEnhancer(ExtendedTemperature, { kind: 'names', names: ['Prague', 'cz'], type: 'temp_max',});
forecast-query
For non-react use refer to package https://www.npmjs.com/package/forecast-query
If you have any ideas or have discovered any bugs, please report them, I will take a look as soon as possible.