Valor numérico (no monetario)
Uso
Este es un componente de utilidades para renderizar y dar formato a los datos, por eso, no hay pautas de UX específicas.
Código
<NumberValue value={123456} />
Instrucción de importación
import { NumberValue } from '@jutro/components';
Contrato de componentes
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
Propiedades
idobligatorio- Tipo
stringDescripciónUnique identifier for the component.
className- Tipo
stringDescripciónCSS class name for this component.
format- Tipo
'decimal' | 'percent'DescripciónThe format to display the number in.
Valor predeterminado'decimal' maximumFractionDigits- Tipo
numberDescripciónMaximum number of fraction digits.
Valor predeterminado3 minimumFractionDigits- Tipo
numberDescripciónMinimum number of fraction digits.
Valor predeterminado0 path- Tipo
stringDescripciónSpecifies the path to the value used to generate the output.
placeholder- TipoDescripción
The string to display in the UI if 'value' is undefined/null.
Valor predeterminado'-' prefix- TipoDescripción
Optional prefix message to be attached in front of the value.
showFractions- Tipo
booleanDescripciónIf
true, displays fractions with the value. showGrouping- Tipo
booleanDescripciónIf
true, displays grouping separators with the value.Valor predeterminadotrue suffix- TipoDescripción
Optional suffix message to be attached at the end the value.
tag- Tipo
stringDescripciónThe HTML tag to use when rendering the outermost element of this component.
Valor predeterminado'div' value- Tipo
numberDescripciónThe numeric value to display.
API imperativa
jutro-components ofrece la función formatNumber para usar con la API de formato imperativo.
import { formatNumber } from '@jutro/components';
Esto importa una función formatNumber(intl, props, number) con los siguientes argumentos y tipo de retorno:
Return value
- Tipo
stringDescripciónFormatted number string.
intl- Tipo
react.intl.IntlDescripciónAn instance of the imperative formatting API access object.
number- Tipo
numberDescripciónNumeric value override to be used instead of the one provided with props.
props- Tipo
NumberValue.propTypesDescripciónValid properties for a
NumberValueobject.
Ganchos
No hay ganchos para Valor numérico.
Claves de traducción
No hay traducciones para Valor numérico.
Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.
Escotillas de escape
Para obtener más información, consulte nuestra documentación sobre escotillas de escape.
Ejemplos
Consulte la sección Uso para obtener detalles sobre cómo diseñar un valor numérico correctamente y las diferentes opciones de configuración que ofrecemos.
Ejemplo de valor numérico básico
Puede utilizar el componente NumberValue para renderizar un número.
<NumberValue value={123456} />
Ejemplo de porcentaje
En su lugar, puede usar la propiedad format para renderizar el número como un porcentaje.
<NumberValue
value={0.25}
format="percent"
/>
Mostrar fracciones
Puede elegir si desea mostrar la parte fraccionaria del valor utilizando la propiedad showFractions. Esto redondeará el valor al número entero más cercano.
<NumberValue
value={1234.5}
showFractions={false}
/>
Ejemplo de API imperativa
jutro-components ofrece la función formatNumber para usar con la API de formato imperativo.
import { formatNumber } from '@jutro/components';
import { IntlContext } from '@jutro/locale';
...
const intl = useContext(IntlContext);
...
const n1 = formatNumber(intl, { value: 1232.23, format: 'decimal' });
const n2 = formatNumber(intl, { value: 1, format: 'percent' });
const n3 = formatNumber(intl, { value: 1231232.23434, format: 'decimal', showFractions: true, maximumFractionDigits: 4 });
const n4 = formatNumber(intl, { format: 'decimal', showFractions: true }, 1.2345);
// en-US output:
1,232
100%
1,231,232.2343
1.235
// fr-FR output
1 232
100 %
1 231 232,2343
1,235