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;

🔓 10 Free APIs to Power Your Next Project: Unlocking Potential for Developers 🚀