Building a Weather Widget with React + MDX

MDX allows us to mix Markdown content with React components, so we can create interactive widgets inside blog posts.

In this post, we will:

1. Build a WeatherWidget React component.
2. Fetch live weather data from the OpenWeather API.
3. Display a weather icon depending on the conditions (sunny, cloudy, rain).
4. Embed the component directly into our MDX post.

Live Example

Here’s the weather in London:

Loading weather...

You can change the city by passing a different city prop:

<WeatherWidget city="New York" />
<WeatherWidget city="Tokyo" />