woocommerce/packages/js/number
Christopher Allford f41258a9f2 Added EOF Newlines
We put an extra newline at the end of all
files to detect those that have been
malformed or truncated.
2022-05-10 13:35:31 -07:00
..
changelog Added Changelogs 2022-05-10 13:31:13 -07:00
src Fix returned type of `numberFormat`. 2022-03-22 20:56:07 +01: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 Bumped WCA JS package version numbers 2022-03-22 16:08:24 +08:00
README.md Moved WCA Packages 2022-03-18 14:25:26 -07:00
composer.json Packages: Add Changelogger scripts (#32813) 2022-05-05 15:26:36 +12:00
composer.lock Packages: Add Changelogger scripts (#32813) 2022-05-05 15:26:36 +12:00
jest.config.json Moved WCA Packages 2022-03-18 14:25:26 -07:00
package.json Packages: Add Changelogger scripts (#32813) 2022-05-05 15:26:36 +12:00
project.json Add build-watch to most js packages and remove packages watch from woocommerce-admin command 2022-03-30 11:46:12 -03:00
tsconfig-cjs.json Added EOF Newlines 2022-05-10 13:35:31 -07:00
tsconfig.json Define NumberConfig data type, export type declarations. 2022-03-22 20:52:30 +01:00

README.md

Number

A collection of utilities to propery 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 { formatNumber, 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( siteNumberOptions, formatNumber );
const formatStoreValue = partial( siteNumberOptions, formatValue );

// 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'