Select Page
List of all React Packages (Includes React Native)

Written by Quadrum Lee

January 19, 2020

In this article, I list down frequently used NPM react packages for React / React-native Developers. The following react packages are efficient, secure and easy to use. But you should choose the libraries according to your project requirements (Size, Scalability, complexity, security, and reliability). So read the article carefully and pick the best react packages to speed up your app development.

02) Individual React Native Libraries (React-Native)

— In-app-purchases 
01. react-native-iapGreat open-source library for in-app purchase for both android & ios. It supports both purchasing and subscription to your product. Uses android billing client 2.0 and frequently maintains the library.

02. react-native-billing Provide an easy interface only for android to purchases and subscriptions plans. Uses billing client 1.0 version and less maintenance. But can’t underestimate this one because when I got this issue from react-native-iap, I could able to handle it through the react-native-billing library.
— background Task
03. react-native-background-timer This allows to run a timer in the background and supports both platforms (android & iOS). For more info check my medium article here.
— UI Components
06. react-navigation  – Born from the React-Native Community and provides the extensible routing and navigation for your React Native apps.

07. react-native-linear-gradient – Make your component to display a smooth transition between 2 or more specific custom colors. (Goes left, right, up, down and diagonally)

 

08. react-component-action-debouncer  – This is used to avoid breaking the app by rapidly pressing the button. This is a higher-order component and you can enhance any react component for its action handlers.

 

09. react-native-splash-screen – Helps to create the custom launch screen when the app opens and it stays visible while the app is loading. Then you can hide the splash screen programmatically, after mount your main Screen.

 

10. react-native-video This library is used to play any video in both android and iOS and it provides all the props which need to play and control the video.

 

13. react-native-vector-icons Helps to use customizable vector icons for your react native project using your own SVGs. Check my youtube video on how to setup Icomoon with easy steps.

 

20. d3
— Local Storage
31. realm JavaScript  – Popular open-source mobile database and alternative to SqlLite & Core data.

 

32. @react-native-community/async-storage – Lightweight, unencrypted, asynchronous and key-value storage system for React Native

03) State management libraries (React/ React-Native)

(1) redux– JavaScript library and built to manage the application state. and it has flux like flow with a single large data store. redux is written in ES6 and mainly used for complex and scalable applications. redux can be used in react, angular, vanilla js and more.

(2) react-reduxThis package is specifically built for React to manage the React application state. This helps to bind between React & redux that allows the component(Container component) to listen to store state changes

(3) mobX – Testing library and it is used to make simple state management. mobX is written in JavaScript and it has more than one store for data storage. This is mainly used for simple and small applications because scalability is less. But gives good performance compare to redux.

 

Mobx vs Redux Mobx Redux
Definition testing library and simple state management The Javascript library for managing global states in the applciation
Programmed It is mainly written in JavaScript It is originally written in ES6
Datastore MobX can have more than 1 data store. Only 1 large store.
Capabilities Used for simple and small applications Used for complex and scalable applications.
 Scalable Scalability is less Scalability is high and can be used in large scalable applications.
Performance Good performance Not much efficient compared to mobX

04) Http clients (React/ React-Native)

There are a lot of ways to make HTTP requests and load resources from a remote URL. Browser built-in fetch() function installed in the modern browsers and no need to install a third-party package to access it. It returns a promise. There are some other libraries that provide benefits over fetch() function. Let discuss them as well.

(1) Axios – Promise based HTTP client and very similar in functionality with fetch(). But Axios work better for backward compatibility than fetch().

 

Benefits of Axios over fetch

     (i)  It has built-in XSRF protection.

XSRF stands for Cross-Site Forgery. So why do we need this protection?  Let say, you log into your bank account on your computer and receives the session token. It makes sense right?. So After a while, you receive the disguised email from hacker and you click the link in the email. It will run some code on your computer and connect to your bank account with a previously logged session token.

Holy shit! All of your fetch APIs are going to be hacked but don’t worry, now website security has strengthened over the past few years. Anyway, It is better to stay on the safe side. 

     (ii) It performs automatic JSON data transformation.

Using fetch() – Need to transform.

1
2
3
fetch('http://dummyAPI/v2')
  .then((response) => response.json())
  .then((data) => return data)

Using axios() – Does automatic transformation.

1
2
axios.get('http://dummyAPI/v2')
  .then((response) => return response)

     (iii) Support a wide range of browsers.

Both fetch() and Axios() support Google Chrome, Opera, Safari and edge, but Axios supports IE8 and newer versions as well.  It allows your web applications to compatible with a large range of browsers.

     (iv)  Axios has Interceptions.

You can run your code, change the request, or response data before the request is made or promise is settled (you can run async operations before .then() or catch() is executed). 

     (v)  Monitor the progress of the POST Request.

Let say, you have a large request that would take a long time. So It doesn’t even trigger your promise .then() or .catch() methods and stay a long time in pending status. Fetch does not have to handle the above scenario, but Axios does. Check the sample post request using Axios

1
2
3
4
5
axios.post('http://dummyAPI/v2', data, {
  onUploadProgress: ({ total, loaded }) => {
    // Update progress
  }),
})

(2) Apisauce:

Uses Axios as a base, Lightweight and fast HTTP client library which is added request/response transformers and customized standard error formats. Promise based HTTP client for javascript and it can be use used for your front-end and back-end node js applications.

(3)  request

This is mainly designed to make HTTP calls in the simplest way and include high-level HTTP client features. By default, it follows redirect and supports HTTPS as well.

(4) superagent

Lightweight client-side HTTP request library and rich of high-level HTTP client features. Promise based and lightweight progressive AJAX API works both node and all modern browsers.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Related Articles

Cool Gadgets on Amazon 2019 | Cool Amazon Products

Cool Gadgets on Amazon 2019 | Cool Amazon ProductsG, 0 Comments Today’s, topic about Cool Gadgets on Amazon 2019. Now, let's go and know about those gadgets in more deep. 01. The orange screwThis is one of the most clever and versatile tools you'll ever...

Is Interstellar Travel Impossible? | Interstellar Travel

Is Interstellar Travel Impossible? | Interstellar TravelG, 0 Comments Today's, topic about Interstellar Travel Impossible. Let's go into deep and understand the scientific facts related to this topic. Simply, Is interstellar travel doomed to remain in the...

Smart Retail Technology in IoT – Smart Retail Stores

Smart Retail Technology in IoT – Smart Retail StoresG, 0 Comments Today's topic is about "How IOT Gives Rise to Smart Retail Technology". Simply, I want you to picture your kitchen at home. If you're like most people you can trace many of your...

Stay Up to Date With The Latest News & Updates

Join Our Newsletter

Follow Us