@eggtronic/react-weather-widget

☁️ react-weather-widget ☁️

☁️ A nice weather widget for react based on openweather - Demo

---

---

Install

---

✨ Feature

• Light Weight - the only peer dependency is styled-components
• Typescript Support
• Customizable Theme
• Geo Detection - detect you geo location by default

🖥 Peer Dependency

• react: "^16.8.0"
• react-dom: "^16.8.0"
• styled-components: "^4.0.0"

🌈 Usage

• Basic

  import React from 'react';
  import WeatherWidget from '@eggtronic/react-weather-widget';
  
  function Basic() {
    const key = 'xxx'; // your openweathermap api key
  
    return (
      <WeatherWidget apiKey={key} />
    );
  }
  

• Theme

  import React from 'react';
  import WeatherWidget, {
    darkTheme,
    lightTheme,
    defaultTheme
  } from '@eggtronic/react-weather-widget';
  function Theme() {
    const key = 'xxx'; // your openweathermap api key
  
    return (
      <WeatherWidget 
        apiKey={key} 
        theme={darkTheme}
      />
    );
  }
  

• Customize Theme

  import React from 'react';
  import WeatherWidget from '@eggtronic/react-weather-widget';
  function CustomTheme() {
    const key = 'xxx'; // your openweathermap api key
    const theme = {
      color: ['#b92b27', '#1565C0'], // graient color of background
      width: '500px', // widget width
      height: '650px', // widget height
      mainFontSize: '24px', // main text size
      subFontSize: '14px', // sub text size
      mainFontColor: '#fff', // main text color
      subFontColor: '#fff', // sub text color
      hrColor: '#fff', // hr line color
  
      // line chart styles
      lineChartPadding: [45, 30],
      lineChartLabelPadding: [-10, -10],
      lineChartColor: '#fff',
      lineChartLabelColor: '#fff',
      lineChartLabelSize: 1,
      lineChartHeight: '120px'
    }
  
    return (
      <WeatherWidget 
        apiKey={key} 
        theme={theme}
      />
    );
  }
  

• Others

  import {
    WeatherHeader, 
    WeatherHourly, 
    WeatherDaily,
    LineChart
  } from '@eggtronic/react-weather-widget';
  
  // you can use those child components independently
  

---

📝 Props

Name	Type	Default	Description
className	string		Additional CSS class for the root DOM node
apiKey	string		Your api key from OpenWeatherMap
geo	{lat: string, lon: string} or undefined	undefined	Widget detects your geo by default, you can also specify your own geo location
theme	WeatherWidgetTheme	defaultTheme	Customize theme
exclude	OpenWeatherMapExclude	undefined	OpenWeatherMap api config, exclude daily/hourly/current wealther data
dayRange	[number, number]	[1, 6]	Specify how many days' weather to display (start from next day)
hourRange	[number, number]	[1, 6]	Specify how many hours' weather to display (start from next hour)
children	ReactElement[]	undefined	React children

---

🔨 Development

npm run install
npm run storybook

🧪 Test

npm run test

🔧 Build

npm run build

License

MIT © EggTronic