1. OpenWeatherMap API
The OpenWeatherMap API provides weather data for any location in the world, including current weather, forecasts, and historical data. This API is ideal for building weather widgets, dashboards, or travel apps.
Link: OpenWeatherMap API
import React, { useState, useEffect } from 'react';
function Weather() {
const [weather, setWeather] = useState(null);
useEffect(() => {
fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY')
.then(response => response.json())
.then(data => setWeather(data));
}, []);
return (
<div>
{weather ? (
<div>
<h3>{weather.name}</h3>
<p>{weather.weather[0].description}</p>
<p>{Math.round(weather.main.temp - 273.15)}°C</p>
</div>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default Weather;
2. Unsplash API
The Unsplash API gives you access to thousands of high-resolution photos. It’s perfect for projects that require visually appealing images, such as dynamic backgrounds, galleries, or search features for stock photos.
Link: Unsplash API
import React, { useState, useEffect } from 'react';
function RandomPhoto() {
const [photo, setPhoto] = useState('');
useEffect(() => {
fetch('https://api.unsplash.com/photos/random?client_id=YOUR_API_KEY')
.then(response => response.json())
.then(data => setPhoto(data.urls.full));
}, []);
return (
<div>
{photo ? <img src={photo} alt="Random Unsplash" style={{ width: '100%' }} /> : <p>Loading...</p>}
</div>
);
}
export default RandomPhoto;
3. NewsAPI
NewsAPI provides access to a wide range of news articles from various sources around the world. You can use this API to build news aggregators, trending news sections, or custom news feeds in your application.
Link: NewsAPI
import React, { useState, useEffect } from 'react';
function News() {
const [articles, setArticles] = useState([]);
useEffect(() => {
fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY')
.then(response => response.json())
.then(data => setArticles(data.articles));
}, []);
return (
<div>
{articles.map((article, index) => (
<div key={index}>
<h3>{article.title}</h3>
<p>{article.description}</p>
<a href={article.url} target="_blank" rel="noopener noreferrer">Read more</a>
</div>
))}
</div>
);
}
export default News;
4. The Cat API
The Cat API is a fun and simple API that provides random images of cats. It’s great for adding a playful element to your app, such as a "random cat picture" feature or a pet adoption site.
Link: The Cat API
import React, { useState, useEffect } from 'react';
function RandomCat() {
const [catImage, setCatImage] = useState('');
useEffect(() => {
fetch('https://api.thecatapi.com/v1/images/search?api_key=YOUR_API_KEY')
.then(response => response.json())
.then(data => setCatImage(data[0].url));
}, []);
return (
<div>
{catImage ? <img src={catImage} alt="Random Cat" style={{ width: '100%' }} /> : <p>Loading...</p>}
</div>
);
}
export default RandomCat;
5. Currency Exchange API (Exchangerate API)
This API provides real-time currency exchange rates. It’s useful for financial applications, e-commerce platforms, or any project that requires currency conversion.
Link: Exchangerate API
import React, { useState, useEffect } from 'react';
function ExchangeRates() {
const [rates, setRates] = useState({});
useEffect(() => {
fetch('https://api.exchangerate-api.com/v4/latest/USD')
.then(response => response.json())
.then(data => setRates(data.rates));
}, []);
return (
<div>
<h3>Exchange Rates (USD)</h3>
{Object.keys(rates).length > 0 ? (
<ul>
{Object.entries(rates).map(([currency, rate]) => (
<li key={currency}>{currency}: {rate}</li>
))}
</ul>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default ExchangeRates;
6. OpenAI GPT-3 API (Limited Free Tier)
The GPT-3 API from OpenAI offers powerful natural language processing capabilities. Use it to generate text, answer questions, create chatbots, or build smart content tools. Note that it has a limited free tier.
Link: OpenAI GPT-3 API
import React, { useState } from 'react';
function GPT3Example() {
const [responseText, setResponseText] = useState('');
const fetchGPT3Response = () => {
fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer YOUR_API_KEY`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'text-davinci-003',
prompt: 'Write a tagline for a tech company',
max_tokens: 10
})
})
.then(response => response.json())
.then(data => setResponseText(data.choices[0].text.trim()));
};
return (
<div>
<button onClick={fetchGPT3Response}>Get Tagline</button>
<p>{responseText}</p>
</div>
);
}
export default GPT3Example;
7. JSONPlaceholder
JSONPlaceholder is a free online REST API that you can use for testing and prototyping. It provides fake data for posts, comments, users, and more. It’s especially useful when building and testing front-end applications.
Link: JSONPlaceholder
import React, { useState, useEffect } from 'react';
function Posts() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => setPosts(data));
}, []);
return (
<div>
<h3>Posts</h3>
{posts.map(post => (
<div key={post.id}>
<h4>{post.title}</h4>
<p>{post.body}</p>
</div>
))}
</div>
);
}
export default Posts;
8. PokeAPI
PokeAPI offers a vast amount of data on Pokémon, including details on Pokémon species, moves, abilities, and more. It’s perfect for building Pokémon-related games or informational apps for fans.
Link: PokeAPI
import React, { useState, useEffect } from 'react';
function Pokemon() {
const [pokemon, setPokemon] = useState(null);
useEffect(() => {
fetch('https://pokeapi.co/api/v2/pokemon/pikachu')
.then(response => response.json())
.then(data => setPokemon(data));
}, []);
return (
<div>
{pokemon ? (
<div>
<h3>{pokemon.name}</h3>
<img src={pokemon.sprites.front_default} alt={pokemon.name} />
</div>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default Pokemon;
9. JokeAPI
JokeAPI delivers random jokes in various categories, including programming and general humor
. It includes filters for safe-for-work (SFW) and not-safe-for-work (NSFW) content, making it ideal for adding humor to your app.
Link: JokeAPI
import React, { useState, useEffect } from 'react';
function RandomJoke() {
const [joke, setJoke] = useState('');
useEffect(() => {
fetch('https://v2.jokeapi.dev/joke/Programming')
.then(response => response.json())
.then(data => setJoke(data.joke || `${data.setup} - ${data.delivery}`));
}, []);
return (
<div>
<h3>Random Joke</h3>
<p>{joke}</p>
</div>
);
}
export default RandomJoke;
10. OpenLibrary API
OpenLibrary provides access to data on millions of books, authors, and subjects. You can use it to build a book recommendation system, a digital library, or a literary research tool.
Link: OpenLibrary API
import React, { useState, useEffect } from 'react';
function BookInfo() {
const [book, setBook] = useState(null);
useEffect(() => {
fetch('https://openlibrary.org/api/books?bibkeys=ISBN:0451526538&format=json')
.then(response => response.json())
.then(data => setBook(data['ISBN:0451526538']));
}, []);
return (
<div>
{book ? (
<div>
<h3>{book.details.title}</h3>
<p>Author: {book.details.authors[0].name}</p>
</div>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default BookInfo;
Top comments (1)
Great share !!