@liujie2017/weather-widget
Advanced tools
The Weather Widget is a dynamic, React-based web component that leverages GraphQL to fetch weather data for different locations. It's designed to be flexible, allowing integration into any front-end framework.
The Weather Widget is a dynamic, React-based web component that leverages GraphQL to fetch weather data for different locations. It's designed to be flexible, allowing integration into any front-end framework.
The Weather Widget has been deployed to npm for easy installation and CDN via jsFiddle for quick integration. Here are two ways to use it:
To install the Weather Widget via npm, run the following command in your project directory:
npm i @liujie2017/weather-widget@latest
```javascript
Then, you can import and use the widget in your React application:
```javascript
import { green, purple } from "@mui/material/colors";
import "@liujie2017/weather-widget"
import "./App.css";
declare global {
namespace JSX {
interface IntrinsicElements {
["weather-widget"]: any;
}
}
}
function App() {
const themePurple = {
palette: {
primary: {
main: purple[500],
},
secondary: {
main: green[500],
},
warning: {
main: purple[500],
light: purple[100],
},
},
};
return (
<>
<weather-widget latitude={-40} longitude={74} theme={JSON.stringify(themePurple)}></weather-widget>
</>
);
}
export default App;
For quick prototyping or integration without npm, you can use the Weather Widget directly in your HTML through a CDN provided by jsFiddle. Include the following script tag in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/@liujie2017/weather-widget@0.0.1/dist/index.es.min.js"></script>
After including the script, you can use the widget in your HTML as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="root"></div>
<weather-widget
latitude="90"
longitude="89"
theme='{
"palette":{
"primary":{
"main":"#917ca9"
},
"secondary":{
"main":"#a4bc8a"
},
"warning":{
"main":"#917ca9",
"light":"#bcaacf"
}
}
}'
></weather-widget>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@liujie2017/weather-widget@0.0.1/dist/index.es.min.js"
></script>
</body>
</html>
The Weather Widget supports several props for customization:
npm i
npm run dev
```javascript
FAQs
The Weather Widget is a dynamic, React-based web component that leverages GraphQL to fetch weather data for different locations. It's designed to be flexible, allowing integration into any front-end framework.
The npm package @liujie2017/weather-widget receives a total of 3 weekly downloads. As such, @liujie2017/weather-widget popularity was classified as not popular.
We found that @liujie2017/weather-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.