Home

@dr.pogodin/react-utils is yet another ReactJS development kit. It provides a selection of configurations, setups, and tools needed in almost every React project, which greately facilitates and speeds up development.

The starter pack @dr.pogodin/react-starter provides the setup which takes full advantage of this library.

Release Notes

Content

Installation

Install the package as

$ npm install --save @dr.pogodin/react-utils
$ ./node_modules/.bin/react-utils-setup

Then import the global stylesheet into the root ReactJS component of your app:

/* eslint-disable global-require */
if (process.env.NODE_ENV === 'production') {
  require('@dr.pogodin/react-utils/prod-styles');
} else {
  require('@dr.pogodin/react-utils/dev-styles');
}
/* eslint-enable global-require */

To upgrade this library to the latest version just execute again

$ ./node_modules/.bin/react-utils-setup

Reference

Configs

Components

  • Button – Implements themeable buttons and button-like components (components that look like regular buttons, but behave as links) in the same uniform manner.
  • Checkbox – Implements themeable checkboxes.
  • CodeSplit – Implements code splitting into separate code chunks.
  • Dropdown – Implements themeable dropdown element.
  • Input – Implements themeable input field.
  • Link – Auxiliary wrapper around the React Router's <Link>. Allow to handle external and internal links in the same uniform manner.
  • MetaTags – Helps to inject meta tags (page title, a brief content description, and social media thumbnails) into generated pages.
  • Modal – Themeable modal component.
  • NavLink – Auxiliary wrapper around the React Router's <NavLink>. Allow to handle external and internal links in the same uniform manner.
  • PageLayout – Simple and themeable page layout.
  • ScalableRect – Container keeping given aspect ratio of its sides regardless the width you set.
  • ThemeProvider – Alias for <ThemeProvider> from dr.pogodin/react-themes.
  • Throbber – Simple activity indicator (three bouncing circles).
  • WithTooltip – Tooltip component.
  • YouTubeVideo – Embed YouTube video component.

NodeJS Scripts

  • react-utils-build – The script for Babel, and Webpack build of the library and derived apps. Can be used to work around issues with npm link command for the library development within dependant projects.
  • react-utils-setup – The script for library installation and upgrades.

(S)CSS Styling

  • Global Styles – Provides global CSS styles good to have in any application.
  • SCSS Mixins – Collection of useful style mixins;

Utilities

  • _ (lodash) – An alias for lodash library (generic JS helpers).
  • api – An alias for axios (HTTP(S) client).
  • client(..) – Client-side application initialization.
  • config – Isomorphic application config.
  • isomorphy – Collection of helpers dealing with isomorphic aspects of code.
  • JU (Jest utils) – Helpers useful in Jest tests.
  • newBarrier(..) – a function which creates a Promise with its resolve method attached as .resolve field.
  • PT – Alias for prop-types library.
  • server – Creates & launches ReactJS server.
  • server/errors – Server-side helpers for error handling.
  • themed – Aliases for dr.pogodin/react-themes (UI styling with theme composition).
  • time – Date & time utilities: an alias for dayjs library, extended with some auxiliary constants and methods.
  • url – URL utilities.
  • webpack – Various utils related to the Webpack bundling process.
  • withRetries(..) – A helper which attempts to execute given async operation up to the specified number of times with given intervals between attempts. It stops and returns the operation result after the first successful attempt.