Skip to content

Commit f8ddcd0

Browse files
StorytellerCZlonglho
authored andcommitted
feat: Upgrade guide implementing RelativeTime behavior (#1374)
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?
1 parent d110548 commit f8ddcd0

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

docs/Upgrade-Guide.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,16 @@ When we introduced `FormattedRelative`, the spec for [`Intl.RelativeTimeFormat`]
241241

242242
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.
243243

244+
7. Implementing `FormattedRelative` behavior
245+
246+
You can use `@formatjs/intl-utils` to get close to the previous behavior like this:
247+
```js
248+
import { selectUnit } from '@formatjs/intl-utils';
249+
const {value, unit} = selectUnit(Date.now() - 48 * 3600 * 1000);
250+
// render
251+
<FormattedRelativeTime value={value} unit={unit} />
252+
```
253+
244254
### `formatMessage` now supports `ReactElement`
245255

246256
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>`:

0 commit comments

Comments
 (0)