# react-open-weather-map-widget
> Open weather map widget written in react
Latest version **1.0.2** (published 2022-08-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-open-weather-map-widget
pnpm add react-open-weather-map-widget
yarn add react-open-weather-map-widget
bun add react-open-weather-map-widget
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-08-17 |
| First published | 2022-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 85.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jan Jankowski |
| Maintainers | jan.jankowski |
| Keywords | react, widget, open-weather-map |
## Links
- npm: https://www.npmjs.com/package/react-open-weather-map-widget
- Repository: https://github.com/JamesHawkJ/react-open-weather-map-widget
- Homepage: https://github.com/JamesHawkJ/react-open-weather-map-widget#readme
- Issues: https://github.com/JamesHawkJ/react-open-weather-map-widget/issues
- npm.io page: https://npm.io/package/react-open-weather-map-widget
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.2 (latest) — 2022-08-17
- 1.0.1 — 2022-08-17
- 1.0.0 — 2022-08-16
## README
[](https://www.npmjs.com/package/dynamodb-onetable)
[](https://www.npmjs.com/package/dynamodb-onetable)
[](https://coveralls.io/github/JamesHawkJ/open-weather-map-widget?branch=main)
# Open-Weather-Map Widget
Welcome!
This is a widget showing weather information queried from the open weather map api written in react.
By default it shows the general weather condition, the temperature, the pressure and the humidity of a city you put into the search input.
If something doesn’t work, please [file an issue](https://github.com/JamesHawkJ/react-open-weather-map-widget/issues/new).
If you have questions or need help, please ask in [GitHub Discussions](https://github.com/JamesHawkJ/react-open-weather-map-widget/discussions).
## Installation
```sh
npm i react-open-weather-map-widget
```
## Get Started
!!Before you start you need to create an account on [Open Weather Map](https://openweathermap.org/) and [generate an *API Key*](https://home.openweathermap.org/api_keys)!!
After downloading the package import the weather widget component and use it.
You'll need to pass the API Key as a prop to the component. The prop is called `appid`.
## Example
to quickly try out this component:
```sh
npx create-react-app example --template=typescript
```
then change the `App.tsx` return to:
```html
```
and from the root of the app run `npm run start`.
>
>The component will take the full width of the parent that's why I added the wrapper in the example
>
You should see this view:
The widget indicates that 's it;s fetching data by a spinner on the right of the input field like so:
If you don't set the appid prop or your API key is invalid you will see and error icon and on hover you'll see an error message like in this example:
## Customization
You can customize the widget by setting optional props:
The `flavor` prop decides about the view of the widget. You can choose either `card` or `bar`. Bar is set by default. Check the [Styling section](#Styling) to learn more about the views.
You can choose one of the preset themes by setting `theme` to `light` or `dark` or you can create your custom theme and pass it to the `style` prop. Check the [Styling section](#Styling) to learn more about the themes.
You can set a default city as auto fill to the input by setting the `defaultCity` prop.
You can alter the update speed of the widget which is set by default to 30 seconds by setting the `updateSpeed` prop.
You can set boolean flags to change the weather data that will be shown by the widget. *Each section will show only if it's corresponding data is available in the fetch response!*
There are 14 sections that you can show/hide in total. Here's the list with their default values:
```sh
showWeatherCondition = true
showMainTemperature = true
showFeltTemperature = false
showPressure = true
showHumidity = true
showMinimalTemperature = false
showMaximalTemperature = false
showSeaLevelPressure = false
showGroundLevelPressure = false
showVisibility = false
showWind = false
showClouds = false
showRain = false
showSnow = false
```
## Styling
There are two main customization options you can set.
The first one is the `flavor`. You can choose to have the widget show as a card or a bar.
The second choise is choosing the theme. The images above show when the default theme is set so `light`. Here's an example of the `dark` theme:
You can create your own theme by passing a styling object to the `style` prop.
It must implement this interface:
Here's the dark theme as an example:
---
_Source: https://npm.io/package/react-open-weather-map-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._