id: data-format title: DataFormat

DataFormat UI Component

Installation

npm i @synerise/ds-data-format
or
yarn add @synerise/ds-data-format

Usage

For function components:

import React, { FC } from 'react';

import { useDataFormat, FormattedNumber, FormattedDate, FormattedTime, FormattedDateTime } from '@synerise/ds-data-format';

const DATE = new Date('2023-06-25T15:40:00');
const DATE_TO_FORMAT = DATE // moment(DATE) // dayjs(DATE)

export const FunctionComponent: FC = (): JSX.Element => {
  const {
    firstDayOfWeek,
    isSundayFirstWeekDay,
    is12HoursClock,
    formatValue,
    formatMultipleValues,
    getConstants,
    thousandDelimiter,
    decimalDelimiter,
  } = useDataFormat();

  firstDayOfWeek // Sunday = 0 // Monday = 1
  isSundayFirstWeekDay // true // false
  is12HoursClock // true // false
  
  formatValue(1234567);
  formatValue(DATE_TO_FORMAT);
  formatValue(DATE_TO_FORMAT, {targetFormat: 'date'});
  formatValue(DATE_TO_FORMAT, {targetFormat: 'time'});
  formatValue(DATE_TO_FORMAT, {targetFormat: 'datetime'});

  formatMultipleValues([1234567, 1234567]);
  formatMultipleValues([DATE_TO_FORMAT, DATE_TO_FORMAT], {targetFormat: 'datetime'});

  getConstants('months-long');
  getConstants('months-short');
  getConstants('weekdays-long');
  getConstants('weekdays-short');
  getConstants('months-long', { namingConvention: 'lowerCase' }, new Date(2022, 10), new Date(2023, 2), 'month');
  
  thousandDelimiter // "," // " "
  decimalDelimiter // "." // ","
  
  return (
    <>
      <FormattedNumber value={1234567} options={{ unit: 'percent' }} />
      <FormattedDate value={DATE_TO_FORMAT} options={{ month: 'long' }} />
      <FormattedTime value={DATE_TO_FORMAT} options={{ second: 'numeric' }} />
      <FormattedDateTime value={DATE_TO_FORMAT} options={{ dateOptions: { month: 'long' }, timeOptions: { second: 'numeric' } }} />
    </>
  );
};

For class components:

import React, { Component, FC } from 'react';
import { withDataFormat, WithDataFormatProps } from '@synerise/ds-data-format';

type ClassComponentProps = {
  ...
} & WithDataFormatProps;

class ClassComponent extends Component<ClassComponentProps> {
  constructor(props: ClassComponentProps) {
    super(props);
  }

  render() {
    const {
      firstDayOfWeek,
      isSundayFirstWeekDay,
      is12HoursClock,
      formatValue,
      formatMultipleValues,
      getConstants,
      thousandDelimiter,
      decimalDelimiter,
    } = this.props;
    
    return (
      <>
        <div>{formatValue(1234567)}</div>
      </>
    );
  }
}

export default withDataFormat(ClassComponent) as FC<ClassComponentProps>;

Examples

Number

The options object is compatible with https://formatjs.io/docs/react-intl/api#formatnumber

| Code | EU Notation | US Notation | |------------------------------------------------------------------------------------------------------------|----------------------------------|----------------------------------| | formatValue(1234567) | 1 234 567 | 1,234,567 | | formatValue(1234567.89) | 1 234 567,89 | 1,234,567.89 | | formatValue(1234567, { minimumFractionDigits: 2 }) | 1 234 567,00 | 1,234,567.00 | | formatValue(1234567.89, { maximumFractionDigits: 1 }) | 1 234 567,9 | 1,234,567.9 | | formatValue(1234567.89, { style: 'currency', currency: 'USD', prefix: 'Salary: ', suffix: ' per month' })) | Salary: $1 234 567,89 per month | Salary: $1,234,567.89 per month | | formatValue(1234, { notation: 'compact' })) | 1,2K (with PL locale: 1,2 tys.) | 1.2K (with PL locale: 1.2 tys.) | | formatValue(1, { pluralOptions: { type: 'ordinal' } })) | one | one |

Date

The options object is compatible with https://formatjs.io/docs/react-intl/api#formatdate

| Code | EU Notation | US Notation | |------------------------------------------------------|---------------|---------------| | formatValue(date) | 25.06.2023 | 6/25/2023 | | formatValue(date, { month: 'long' }) | 25 June 2023 | June 25, 2023 | | formatValue(date, { targetFormat: 'weekday-long' }) | Sunday | Sunday | | formatValue(date, { targetFormat: 'weekday-short' }) | Sun | Sun | | formatValue(date, { targetFormat: 'month-long' }) | June | June | | formatValue(date, { targetFormat: 'month-short' }) | Jun | Jun |

Time

The options object is compatible with https://formatjs.io/docs/react-intl/api#formatdate

| Code | EU Notation | US Notation | |----------------------------------------------------------------|-------------|-------------| | formatValue(date, { targetFormat: 'time' }) | 15:40 | 3:40 PM | | formatValue(date, { targetFormat: 'time', second: 'numeric' }) | 15:40:00 | 3:40:00 PM |

DateTime

The dateOptions object and the timeOptions object are compatible with https://formatjs.io/docs/react-intl/api#formatdate

| Code | EU Notation | US Notation | |---------------------------------------------------------------------------------------------------------------------|---------------------------|---------------------------| | formatValue(date, { targetFormat: 'datetime' }) | 25.06.2023, 15:40 | 6/25/2023, 3:40 PM | | formatValue(date, { targetFormat: 'datetime', dateOptions: { month: 'long' }, timeOptions: { second: 'numeric' } }) | 25 June 2023, 3:40:00 PM | June 25, 2023, 3:40:00 PM |

formatMultipleValues

| Code | EU Notation | US Notation | |------------------------------------------------------------------------|----------------------------------|----------------------------------| | formatMultipleValues([1234567, 1234567], { minimumFractionDigits: 2 }) | ['1 234 567,00', '1 234 567,00'] | ['1,234,567.00', '1,234,567.00'] | | formatMultipleValues([date, date], { targetFormat: 'month-long' }) | ['June', 'June'] | ['June', 'June'] |

getConstants

| Code | EU Notation | US Notation | |---------------------------------------------------------------------------------------------|--------------------------------|--------------------------------| | getConstants('months-long') | ['January', '...', 'December'] | ['January', '...', 'December'] | | getConstants('months-short') | ['Jan', '...', 'Dec'] | ['Jan', '...', 'Dec'] | | getConstants('weekdays-long') | ['Monday', '...', 'Sunday'] | ['Sunday', '...', 'Saturday'] | | getConstants('weekdays-short') | ['Mon', '...', 'Sun'] | ['Sun', '...', 'Sat'] | | getConstants('months-long', { namingConvention: 'lowerCase' }, startDate, endDate, 'month') | ['november', '...', 'march'] | ['november', '...', 'march'] |

Demo