react-weather-forecast
v0.0.1
Published
Library of react components used for weather forecast from openweather api. Can be used with both pro and free accounts.
Downloads
15
Maintainers
Readme
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.