@synerise/ds-data-format v0.5.0

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

Date

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

Time

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

DateTime

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

formatMultipleValues

getConstants

Demo