How To Use News API In React: Newsdata.io

In this article, we’ll dive into the details of the “React Client” integration guide.

React Client 

NewsData API is a lightweight, dependency-free React Hook client for accessing the NewsData.io API. It supports all available endpoints and automatically handles validation, pagination, and parameter safety.

You can get more information with the “Client React” section of the NewsData.io documentation.

Initial Steps of Integration News API in React

Get Your API Key

The first step is obtaining your unique API key by registering for an account. This serves as the authentication token for your requests.

Install NewsData API 

Start by installing the “newsdataapi” library using the given npm command:

npm install newsdataapi

Import the ‘NewsDataApiClient’ package into your program.

import useNewsDataApiClient from "newsdataapi"

Usage

const { latest, archive, crypto, source } = useNewsDataApiClient("YOUR_API_KEY");

In the bracket, we have mentioned the four endpoints that NewsData.io provides, i.e., latest news, news archive, crypto news, and news sources. To get more information about the endpoints, you must visit the documentation page of NewsData.io.

Another bracket mentions your unique API Key that you can use to fetch the data. To get your API Key, you can go through the ‘How to get the NewsData.io API key’ section of the documentation. 

These steps will initialize the process of fetching the required data. 

1. News Endpoint 

‘Latest‘ News endpoint allows users to get the top live breaking news of the past 48 hours from all over the world. To fetch the Latest news, follow the steps mentioned below.

Each function accepts parameters as an object.

After the initial integration, the latest news parameter would be: 

• ‘For API key authorization, initialize the client with your API key:

const { latest } = useNewsDataApiClient("YOUR_NEWSDATA_API_KEY");

• To fetch the data: 

const data = await latest({ });

The ‘latest’ news endpoint accepts queries and other supported parameters in brackets ({ }). Enter the information you want to retrieve data about within these brackets.

Let’s understand with the help of an example.

If you want to fetch data on AI, then q=ai. The request parameter will be:

const data = await latest({ q: "AI"});

If you want the data on AI to be specifically from a country, the request parameter will be: 

const data = await latest({ q: "AI", country: "us" });

This will fetch all the articles related to AI from the past 48 hours.

2. Archive News Endpoint

The News ‘Archive‘ endpoint allows paid users to access historical news. 

For Example,

The query here is assumed to be elections, so the request parameter would be: 

const { archive } = useNewsDataApiClient("YOUR_API_KEY");

const data = await archive({ q: "elections", from_date: "2023-01-01", to_date: "2023-03-01" });

The ‘archive‘ endpoint accepts queries and other supported parameters in brackets ({ }). Enter the information you want to retrieve data about within these brackets.

3. Crypto News Endpoint 

‘Crypto’ news endpoint allows users to fetch all the news articles related to cryptocurrency.

For Example,

Your query here is ‘Bitcoin‘, such that the request parameter for the crypto news API:

const { crypto} = useNewsDataApiClient("YOUR_API_KEY");

const data = await crypto({ q: "bitcoin", coin: "btc"});

The ‘crypto‘ endpoint accepts queries and other supported parameters in brackets ({ }). Enter the information you want to retrieve data about within these brackets.

4. News Sources Endpoint

To get a list of ‘sources’ of the Newsdata.io News API, use:

For Example,

You want to fetch sources of the country ‘US’:

const { sources} = useNewsDataApiClient("YOUR_API_KEY");

const data = await sources({ country: "us", language: "en" });

The given request will fetch a list of news sources in the US. 

The ‘source’ endpoint accepts queries and other supported parameters in brackets ({ }). Enter the information you want to retrieve data about within these brackets.