woocommerce/packages/js/number
Christopher Allford 4e89debd0c
Fix Jest Preset (#42707)
When using a preset we need to keep in mind that the transformation
paths are relative to the preset, not the consuming package. We get
around this by using `<rootDir>` in the transform paths. However,
doing this means fixing the root directory for all of the jest tests.
This keeps the tests working in the same way but lets us fix the
preset too.
2023-12-12 09:58:13 -08:00
..
changelog Fix spelling mistake and lint issue 2023-11-29 15:13:43 -04:00
src Fix spelling mistake and lint issue 2023-11-29 15:13:43 -04:00
typings Migrate @woocommerce/number to TS 2022-05-20 10:53:41 +08:00
.eslintrc.js Add .eslintrc config to each packages 2022-03-29 16:08:07 +08:00
.npmrc Moved WCA Packages 2022-03-18 14:25:26 -07:00
CHANGELOG.md Prepare Packages for Release (#33776) 2022-07-08 14:04:49 +12:00
PREVIOUS_CHANGELOG.md Update JS packages changelogs (#33412) 2022-06-16 10:06:31 +12:00
README.md Fix typo in @woocommerce/number readme 2022-05-20 11:00:21 +03:00
babel.config.js Update/unify jest@27 across all packages (#34322) 2022-09-06 09:29:45 -05:00
composer.json Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
composer.lock Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
jest.config.json Fix Jest Preset (#42707) 2023-12-12 09:58:13 -08:00
package.json Optimized `wireit` Fingerprinting File Inputs (#42684) 2023-12-11 16:21:35 -08:00
tsconfig-cjs.json Enforce Strict `@types` Dependencies (#37351) 2023-03-23 18:02:20 -07:00
tsconfig.json Enforce Strict `@types` Dependencies (#37351) 2023-03-23 18:02:20 -07:00

README.md

Number

A collection of utilities to properly localize numerical values in WooCommerce

Installation

Install the module

pnpm install @woocommerce/number --save

This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

Usage

import { numberFormat, formatValue, calculateDelta } from '@woocommerce/number';

// It's best to retrieve the site currency settings and compose them with the format functions.
import { partial } from 'lodash';
// Retrieve this from the API or a global settings object.
const siteNumberOptions = {
  precision: 2,
  decimalSeparator: '.',
  thousandSeparator: ',',
};
// Compose.
const formatStoreNumber = partial( numberFormat, siteNumberOptions );
const formatStoreValue = partial( formatValue, siteNumberOptions );

// Formats a number using site's current locale.
const localizedNumber = formatStoreNumber( 1337 ); // '1,377'

// formatValue's second argument is a type: average, or number
// The third argument is the number/value to format
// (The first argument is the config object we composed with earlier)
const formattedAverage = formatStoreValue( 'average', '10.5' ); // 11 just uses Math.round
const formattedNumber = formatStoreValue( 'number', '1337' ); // 1,337 calls formatNumber ( see above )

// Get a rounded percent change/delta between two numbers
const delta = calculateDelta( 10, 8 ); // '25'