https://github.com/quisido/relative-timestamp
Calculates and re-renders a best-fit relative timestamp in React
https://github.com/quisido/relative-timestamp
Last synced: 14 days ago
JSON representation
Calculates and re-renders a best-fit relative timestamp in React
- Host: GitHub
- URL: https://github.com/quisido/relative-timestamp
- Owner: quisido
- License: mit
- Created: 2021-06-21T19:27:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-22T00:01:01.000Z (over 4 years ago)
- Last Synced: 2025-08-29T07:07:34.616Z (about 2 months ago)
- Language: TypeScript
- Size: 653 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `RelativeTimestamp`
[](https://www.npmjs.com/package/relative-timestamp)
[](https://www.npmjs.com/package/relative-timestamp)
[](https://www.npmjs.com/package/relative-timestamp)
`RelativeTimestamp` is a React component for formatting Unix timestamps in
relative time, e.g. `Now`, `12 days ago`, or `1 year ago`.
## Install
- `npm install relative-timestamp` or
- `yarn add relative-timestamp`
## Use
```javascript
import RelativeTimestamp from 'relative-timestamp';
const MY_DATE = new Date(2000, 4, 20);
const MY_TIMESTAMP = MY_DATE.getTime();
// In the year 2021, this will output "21 years ago."
function MyRelativeTimestamp() {
return ;
}
```
## Supported time units
The `RelativeTimestamp` component supports _now_, minutes, hours, days, months,
and years.
_Seconds_ are not supported and are instead represented as _Now_. Rendering
timestamps from seconds ago would be too noisy to animate and have too poor of
performance to re-render every second. Instead of "X seconds ago" ticking up
every second, the component instead renders "Now" and re-renders on the _minute_
mark.
## API
### `children`
Type: `(unit, count) => ReactNode` (optional)
If you want to provide custom internationalization, logic, or styling on your
display, you can optionally pass a `children` prop that accepts the unit and
count.
For example,
```javascript
const MY_DATE = new Date(2000, 4, 20);
const MY_TIMESTAMP = MY_DATE.getTime();
function MyRelativeTimestamp() {
return (
{(unit, count) => {
switch (unit) {
case 'now':
return now;
case 'days':
case 'hours':
case 'minutes':
case 'months':
case 'years':
return {unit}_ago;
}
}}
);
}
```
### `value`
Type: `number` (required)
The `value` prop should be the Unix timestamp that you want to display
relatively.
## Contributing
- `yarn set version latest`
- `yarn up * @*/*`
- `yarn add --dev @yarnpkg/pnpify`
- `yarn pnpify --sdk vscode`