Useful frontend packages

reference.md

List of useful packages by application

General tools

lodash (types)

promise-retry (types)

• Easy to use package to write retry logic to promises

promise-sequential

• Run an array of promises sequentially.

Date/time manipulation

datefns

• lightweight package

dayjs

• good if you're more familiar with moment.js syntax

Internationalization

i18next

Number manipulation

bigjs

• Some crypto denominations go beyond what vanilla javascript can handle

numeral

Form validation

formik yup (form schemas)

• formik and yup should be used together
• easy to build cross platform form validation (web & mobile)

Code Quality

First of all, eslint should be used

lint-staged

• run linting on staged files
• this is useful for large projects, where the alternative would be to run linting on all files, which would take a long time

husky

• setup pre-commit hooks

Trigger pre-commit eslint checks

This part assumes lint-staged and husky have been installed.

• After installation, create a .husky/pre-commit file with the following contents

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

• Personally, I also like to have a pre-push config to run jest tests before each push.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx jest --coverage --passWithNoTests

React Native Specific

These packages are for react native only

[React-Native] Local Storage

react-native-mmkv-storage

• note, this library uses JSI modules, follow the special installation instructions if using react-native-reanimated2
• secure storage using fast mmkv storage method

Responsive/Supporting different screen sizes

react-native-safe-area-context

• more versatile safe area package (versus the one that comes with react-native)

react-native-size-matters

• easily scale components based on device screen size

React Native ENV Config

react-native-config

• brings process.env support to react native