c05605fddf
* Update husky from 4 to 7 * Update @types/jest from 26 to 27 * Update lint-staged from 10 to 12 * Update babel-jest from 26 to 27 * Update @typescript-eslint/eslint-plugin from 4 to 5 * Update @typescript-eslint/parser from 4 to 5 * Update chalk from 4 to 5 * Update concurrently from 5 to 7 * Update stylelint from 9 to 14 and stylelint-config-wordpress from 13 to 17 * Update @wordpress/prettier-config from 0.4 to 1.1 * Update eslint from 7 to 8, @wordpress/eslint-plugin from 8 to 10, eslint-plugin-testing-library to 5 * Fix lint errors after updating eslint-plugin-testing-library * Fix style lint * Rename .stylelintrc.json -> stylelint.config.js & add todo comment Fix stylelint.config.js * Remove @wordpress/e2e-test-utils * Add changelogs for eslint-plugin * Update storybook/preview.js since addDecorator has been deprecated Remove parameters * Import directly from @storybook/addon-docs * Migrate some stories to use @storybook/addon-controls Add a comment for @storybook/addon-knobs * Update changelogs * Update preview.js to fix lint warning * Update pnpm-lock.yaml * Fix eslint layout errors (https://github.com/woocommerce/woocommerce-admin/pull/8484) |
||
---|---|---|
.. | ||
src | ||
.npmrc | ||
CHANGELOG.md | ||
README.md | ||
jest.config.json | ||
package.json | ||
tsconfig-cjs.json | ||
tsconfig.json |
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'