Izulu-react-package NPM

Izulu Weather

A weather widget to display weather conditions for any city in the world.

Prerequisites

Default Configuration

  apiKey: "YOUR OPEN WEATHER API KEY",
  parentClassName: String default "weather",
  autoRefresh: Boolean default true,
  isBackroundImageEnabled: Boolean default true,
  backgroundColor: Boolean default false,
  isUserConfig: Boolean default true, //Experimental
  defualtCity: String default "New York",
  refreshInterval: Number default 30000 /ms,

Simple Installation

Use the cdn to add weather.vanilla.js and style.css.

https://gitcdn.link/cdn/zuludao/izulu/master/weather.vanilla.js
https://gitcdn.link/cdn/zuludao/izulu/master/style.css

Exmaple

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather Today</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://gitcdn.link/cdn/zuludao/izulu/master/style.css">
  <!-- <script type="test/javascript"
   src="https://raw.githubusercontent.com/zuludao/izulu/master/weather.vanilla.js">
      </script> THIS WONT WORK! -->
  <script type="text/javascript" src="https://gitcdn.link/cdn/zuludao/izulu/master/weather.vanilla.js">

  </script>
</head>

<body>
  <div class="weather"></div>
</body>

<script>
  setTimeout(function() {<!-- setTimeout is Required to ensure all JS loads -->
    Weather.init({ 
      isUserConfig : true, 
      apiKey: "YOUR OPEN WEATHER API KEY", <!-- apiKey is Required-->
      ...
     });
  })
</script>
</html>

React Installation

NB Ensure your react app is up and running.

you can create a new React app with the command below.

npx create-react-app YOUR-APP-NAME

Use the npm or yarn to install.

npm i izulu-react-package --save-dev

Usage

import IzuluReact from "izulu-react-package";

function App() {
  return (
    <div className="App">
      <IzuluReact refreshInterval={150000} 
        apiKey="YOUR OPEN WEATHER API KEY" <!-- apiKey is Required-->
        isBackroundImageEnabled={true} 
        isUserConfig={false}
      />
    </div>
  );
}

export default App;