woocommerce/packages/js/number
Sam Seay 04b74c1053
Upgrade to pnpm 7 (#34661)
* Remove -- -- from scripts that fixed issue in pnpm 6, fix a couple TS issues in sep packages
* Minor fixes to analyzer scripts and doco based on pnpm 7
* Add dompurify types to data package to avoid TS errors
* Remove pnpx in favor of pnpm exec
* Modify the code analyzer to respect pnpm version if present.
* Update instructions for running recursive lint, add comments to explain
2022-09-16 09:21:42 +12:00
..
changelog Upgrade to pnpm 7 (#34661) 2022-09-16 09:21:42 +12:00
src Convert woo number test to TS 2022-05-20 10:53:41 +08: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
.gitignore Update JS packages changelogs (#33412) 2022-06-16 10:06:31 +12: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 Changelogger: Fix PHPCS violations (#33664) 2022-07-07 08:54:48 +12:00
composer.lock Add PR numbers to changelog entries on code freeze process (#33627) 2022-06-28 11:15:39 -07:00
jest.config.json Prefixed Private JS Packages (#33218) 2022-05-31 15:42:00 -07:00
package.json Upgrade to pnpm 7 (#34661) 2022-09-16 09:21:42 +12:00
tsconfig-cjs.json Added EOF Newlines 2022-05-10 13:35:31 -07:00
tsconfig.json Migrate @woocommerce/number to TS 2022-05-20 10:53:41 +08: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'