Skip to content

Commit

Permalink
feat: Upgrade guide implementing RelativeTime behavior (#1374)
Browse files Browse the repository at this point in the history
Adding a section on how to implement the old `FormattedRelative` behavior in v3. As per discussion in:
#1364

Another option I was thinking about was adding an example was:
```js
import React from 'react';
import PropTypes from 'prop-types';
import { selectUnit } from '@formatjs/intl-utils';
import { FormattedRelativeTime } from 'react-intl';

export const FormattedRelative = ({ value, ...props }) => {
  const selectedUnit = selectUnit(new Date(value) || Date.now());
  return <FormattedRelativeTime {...props} value={selectedUnit.value} unit={selectedUnit.unit} />;
};

FormattedRelative.propTypes = {
  value: PropTypes.oneOfType([ PropTypes.date, PropTypes.string ]).isRequired
};

export default FormattedRelative;
```

Thoughts?
  • Loading branch information
StorytellerCZ authored and longlho committed Jul 23, 2019
1 parent d110548 commit f8ddcd0
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions docs/Upgrade-Guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,16 @@ When we introduced `FormattedRelative`, the spec for [`Intl.RelativeTimeFormat`]

Similarly, the functional counterpart of this component which is `formatRelative` has been renamed to `formatRelativeTime` and its parameters have been changed to reflect this component's props accordingly.

7. Implementing `FormattedRelative` behavior

You can use `@formatjs/intl-utils` to get close to the previous behavior like this:
```js
import { selectUnit } from '@formatjs/intl-utils';
const {value, unit} = selectUnit(Date.now() - 48 * 3600 * 1000);
// render
<FormattedRelativeTime value={value} unit={unit} />
```

### `formatMessage` now supports `ReactElement`

The imperative API `formatMessage` now supports `ReactElement` in values and will resolve type correctly. This change should be backwards-compatible since for regular non-`ReactElement` values it will still return a `string`, but for rich text like the example down below, it will return a `Array<string, React.ReactElement>`:
Expand Down

0 comments on commit f8ddcd0

Please sign in to comment.