nmn / react-timeago Goto Github PK

Hi just wanna let you know this library uses Number.isNaN which does not exist in IE11.

Should have a note that this needs to be polyfilled or something...

React 15.2.0 throws a warning with this. Nothing breaks right now but it's a bit noisy.

Unknown props `live`, `minPeriod`, `maxPeriod` on <time> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

amazing work!
is this component support react-native?

Hi @nmn ,
Just you need to remove now props when the Komponent is time since time is a built-in and does not have an attribute called now.

Otherwise, the browser will fire the following error:

I will create PR if I got time. OK ?

Could there be a better, cleaner, way to expose a default formatter, other than TimeAgo.defaultProps.formatter?

The use case is how to customize the output based only on a subset of values? In my case, I tried to show 'recently' if units were 'second' and suffix - 'ago'. All other cases needed to have been handled by a default formatter.

I'd prefer having this:

const formatter = (value, unit, suffix, date, next) => {
  switch (unit) {
    case 'second':
    {
      if (suffix == 'ago') {
        return 'recently';
      }
    }
    default:
      return next(); // or: return next(value, unit, suffix, date) but prebound call is better
  }
};

instead of this:

const formatter = (value, unit, suffix, date) => {
  switch (unit) {
    case 'second':
    {
      if (suffix == 'ago') {
        return 'recently';
      }
    }
    default:
      return TimeAgo.defaultProps.formatter(value, unit, suffix, date);
  }
};

Thank you!

Seeing this warning coming up

warning.js:36 Warning: Unknown prop `now` on <time> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

I'm getting different outputs on Web and React Native. For example:

"21 hour ago" on React Native and "21 hours ago" on React Web.

My React Native code:

import {Text} from 'react-native';
import TimeAgo from 'react-timeago';

<TimeAgo
  component={Text}
  date={petition.get('createdAt')} // # => "2017-03-18T04:38:44.000Z"
/>

You have a typo in your propTypes section.

Should be oneOfType and not onOfType.

It appears no matter the time you pass to date, the initial will start update according to what the docs say on the home page:
every second for a minute, every minute for the next 5 minutes, Every 5 minutes for the hour,...
I think there should be some logic to check how long ago the date passed is, then start at the interval period appropriate for example if you pass Date().now(), then it should obviously start updating every second. But, if you pass in date = -13 minutes ago, it should start the interval at every 5 minutes instead of starting at seconds... then minutes..then 5 minutes...

Instead of throwing an error, can we just return null and throw a warning about a time value being invalid?

Hei!

I think a simple if to check if the time difference is bigger than some specified gaps, in order to alter the interval period would be great.

secondsGap( secs ) {
   if ( secs < 60 ) return 1
   if ( secs < 3600 ) return 60
   if ( secs < 86400 ) return 3600
   return 86400 // ( default rate, update on daily basis )
} 
// ...
setTimeout( changeTime, getInterval( secondsGap ) * 1000 )

Also, there should be an option or parameter or something which will allow us to use "just now" for everything under 60 seconds ...

https://github.com/nmn/react-timeago/blob/master/src/formatters/buildFormatter.js#L64

const now = Date.now()
const days = Math.round(Math.abs(epochSeconds - now) % (1000 * 60 * 60 * 24))

1. epochSeconds isn't in seconds, it's milliseconds -- it's actually then (new Date(date)).valueOf()) in index.js, so it's in ms.
   a) However, this isn't an issue as the logic is treating it like it's ms anyhow (subtracting Date.now(), which is also ms).

2. The real issue is that it should be dividing the difference by "1 day in ms", not doing a modulo of it.

corrected:
Math.round(Math.abs(epochSeconds - now) / (1000 * 60 * 60 * 24))

I'd like to give y'all a PR for the simple fix, but I think this needs tests first, so do you mind if I add tests as well with it? Otherwise I can just give the PR with the corrected logic.

Action items:

• Fix the weeks -> days bug (divide instead of modulo)
• Fix the API variable names from epochSeconds to epochMilliseconds or dateInMs or something like that

I used to pass title='' to avoid having TimeAgo set a title attribute in the datetime tag it creates, since I'm doing my own tooltip — but now:

• If I pass an empty string, the test here will be falsy, and it'll show an ISO string
• If I pass another string, the test will be truthy and it'll show a timestamp

I think it might just be an operator precedence problem? You mean title || (date is string ? timestamp : ISO string), but the code behave as (title || date is string) ? timestamp : iso string

If the date props passed is in future I would like to show the time till and after then switch to timeago after the dateprop is in the past.

On Firefox, look at what happens when I add the Z (for zulu date)

dateStr = 2016-06-03T13:35:00 →5 hours from now (Firefox)
dateStr = 2016-06-03T13:35:00 →8 minutes ago (Chrome)

dateStr = 2016-06-03T13:35:00Z →8 minutes ago (Chrome)
dateStr = 2016-06-03T13:35:00Z →8 minutes ago (Firefox)

Firefox seems to expect all dates to have the Z on the end. Chrome appears to just give in and assumes the Z if it is missing. The results is <TimeAgo date={dateStr} /> behaves differently on FF and Chrome.

What do you think? Is this on your users to be more ISO compliant? It is better to just give in and pad dates like this in TimeAgo to ensure the proper TimeAgo date gets shown?

Related: cryptonomex/graphene#368

The peer dependence of react "^v0.11.1" blocks the use of react v0.12. A brief looks seems to suggest that upgrading should just be a case of changing the version in package.json.

using the simple example I added a future date +2 minutes from now, It only showed 1 minuted from now and did not count down to 0, after the passed in date was in the past the seconds did show for time ago. Any way to adjust so the seconds countdown show when the the date prop is under 1 minute away in the future.

I just added the package and npm install.

And then I imported it in one of my components. Then I hit this error.

What should I do?

When upgrading to React 15.0.0 my build fails throwing the following error:

ERROR in ./~/react-timeago/timeago.js
Module not found: Error: Cannot resolve module 'react/lib/Object.assign' in node_modules\react-timeago
 @ ./~/react-timeago/timeago.js 4:13-47

I guess React 15.0.0 no longer has a dependency on Object.assign so you should add that or let people know they need to provide their own polyfill.

I wanted to use your component however it seems the latest version hasn't been published to NPM yet. I needed a custom formatter for the seconds and it seems the NPM version doesn't have the defaultFormatter argument for the formatter function.

I know it's a pain, but this seems to work in your package.json:

^0.12.2 || 0.13.0-beta.1 || 0.13.0-rc1 || 0.13.0-rc2

Once final is released it would be easy to swap all the jank out for just || 0.13.0.

The docs are missing the lib path, and won't work.

import frenchStrings from 'react-timeago/language-strings/fr'
import buildFormatter from 'react-timeago/formatters/buildFormatter'

Should be:

import frenchStrings from 'react-timeago/lib/language-strings/fr'
import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'

In minimal scenarios, it would be good to have the option to do '5 hours' without the 'ago' suffix. This is useful where all items are in the past and the title says 'Time since x'.

Right now you're using Math.round which makes sense for calculating times. But in our case, we actually just want to always round down to get the remaining time left.

I can do this if I recalculate the time remaining in the formatter option, but I know that's not what it's intended for and wanted to see if it made sense to add in a option to customize how you choose to calculate the time remaining.

when upgrading to react 15 i get this error:

error given was: Error: Cannot find module 'react/lib/Object.assign'

....

@ ./~/react-timeago/timeago.js 4:13-47

Showing 21337250 days ago for date Mon Dec 19 12:56:11 GMT 2016
I use formatter - react-timeago/lib/language-strings/en and version 3.1.1
dateTime is correct on element - 2016-12-19T12:56:11.000Z

@nmn check your npm. I see files like index (Naman’s MacBook Air's conflicted copy 2016-09-06).js and index.js (Naman’s MacBook Air's conflicted copy 2016-09-06).flow.

P. S. Thanks for the great tool!

I use this component on a page where I render on the server and then load react on the client.

I'm getting this error:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) Z" title="2016-09-23T21:28:14.000Z" data
 (server) Z" title="2016-09-23 21:28" data-reactid

Component sent in server response:

<time datetime="2016-09-23T21:28:14.000Z" title="2016-09-23 21:28" data-reactid="844">1 day ago</time>

Component rendered in client:

<time datetime="2016-09-23T21:28:14.000Z" title="2016-09-23T21:28:14.000Z" data-reactid="844">1 day ago</time>

Hi! Great library here. I'm wondering if there's any interest in adding a feature to allow you to specify a different way to calculate the current time besides using Date.now

The use case is that I want to display time ago, but I do not trust the client's clock and instead send a timestamp from my server, compare that to the client's time, and then use that to calculate a consistent offset that I use to calculate the time ago. I rolled this myself but I'd love to replace with a open source component.

I'll probably still fork this and add it for my own usage, just throwing it out there to see what the maintainers of this package would think about it and whether it'd be a good PR / open source contribution candidate. Thanks for your time and energy!! 😄

How would you do this so that when the time is less than a minute ago, instead of the component displaying an annoying timer like:

1 second ago
2 seconds ago
3 seconds ago
...

it would just be a string like:

'just recently'

How to do?

Using latest NPM version ( "react-timeago": "^3.1.3" )

<TimeAgo date={timestamp} />

where

timestamp = 1479308131;

According to EpochConverter, that timestamp is Wed, 16 Nov 2016 14:55:31 GMT

But TimeAgo shows 47 years ago, with a datetime="1970-01-18T02:55:08.131Z"

<TimeAgo date={1479308131} /> shows the same.

<TimeAgo date="1479308131" /> does not work!

EDIT

Just read the documentation again and it expects the timestamp with milliseconds... Multiplying the value by 1000 solved this.

When using a formatter (buildFormatter(x)) I get results for dates lying approx. more than one week in the past like this (today is 5. August):
"26935379 days ago" for "2016-07-29T07:30:59Z"
but
"4 days ago" for "2016-08-01T19:20:52Z"
This is independent from the chosen language btw.

There is a way for show instead of:
X second ago
show something more generic like: a few seconds ago
so that you don't have a counter that increase every seconds(I don't want disable the live for all timing...it just sucks for seconds :()

Thanks.

Before I do the work, I wanted to get your thoughts on this change. I would like to change the <span> that the time is held in to instead be a <time> element. This would also include the datetime attribute.

For example, the HTML result would look like this:
<time datetime="2013-11-29">2 years ago</time>

This will of course help with search engine indexing/crawling as well as HTML5 semantics.

There are several errors with flow 0.38, I don't know with which flow version it was tested, because the flow version is not defined in .flowconfig or defined in packages.json.

Errors related to and more:

type NumberArray = [
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string
]

It's sad because the users must ignore now this package in flowconfig even if it has flow.

I couldn't figure out how to change the default suffix, and/or show the time remaining passed like a counter. I believe i need to use the formatter function but was unclear how to implement it.

Using some show/hide components from material-ui makes react-timeago throw this error on and off

Warning: forceUpdate(...): Can only update a mounted or mounting component. This usually means you called forceUpdate() on an unmounted component. This is a no-op. Please check the code for the TimeAgo component.

Version 3.3.0

I installed the package and ran yarn flow and ended up with this:

node_modules/react-timeago/lib/index.js.flow:195
195:     const nextFormatter = defaultFormatter.bind(null, value, unit, suffix, then)
                                                                                ^^^^ unused function argument
                      v--------------------------------------------------------------------------------
    3: export default function defaultFormatter (value: number, unit: string, suffix: string): string {
    4:   if (value !== 1) {
    5:     unit += 's'
  ...:
    8: }
       ^ function expects no more than 3 arguments. See: node_modules/react-timeago/lib/defaultFormatter.js.flow:3


Found 1 error
error Command failed with exit code 2.

In index.js when you set nextFormatter = defaultFormatter.bind(null, value, unit, suffix, then) seems the last argument shouldn't be there.

I noticed version 3.1.2 has unwanted modulo (%) expression instead of division (/) in function buildFormatter :

Can you tag the last version of master like 3.1.3 to avoid this unwanted behavior and use your helpful library for production with stable version ? Indeed, the bug seems to be fixedon master : https://github.com/nmn/react-timeago/blob/master/src/formatters/buildFormatter.js#L64 ?

Thanks !

macOS, safari 10.0.3 (12602.4.8). I have no any component (it does not shown) on page what contains TimeAgo element.

in chrome everything is ok - I can see it.

Some error handling for this would be nice - perhaps return null and provide a console error?

Hi @nmn,

I just npm installed react-timeago (I wanted to try your solution with shadow files) and I think there is a problem with some language-strings

The type of, say seconds, is

type StringOrFn = string | (value: number) => string

but then in, for example cs.js, there is seconds: function (n, d) { return f(n, d, ['méně než minutou', 'méně než minutu']) }, where f is defined as

function f (n, d, a) { // <= 3 arguments instead of only one
  return a[d >= 0 ? 0 : a.length === 2 || n < 5 ? 1 : 2]
}

and Flow (v0.30.0) seems to complain

Errors dump

node_modules/react-timeago/lib/language-strings/cs.js.flow:6
  6:   return a[d >= 0 ? 0 : a.length === 2 || n < 5 ? 1 : 2]
                ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
  6:   return a[d >= 0 ? 0 : a.length === 2 || n < 5 ? 1 : 2]
                     ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:10
 10:   seconds: function (n, d) { return d < 0 ? 'vähem kui minuti aja' : 'vähem kui minut aega' },
                                         ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 10:   seconds: function (n, d) { return d < 0 ? 'vähem kui minuti aja' : 'vähem kui minut aega' },
                                             ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:11
 11:   minute: function (n, d) { return d < 0 ? 'umbes minuti aja' : 'umbes minut aega' },
                                        ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 11:   minute: function (n, d) { return d < 0 ? 'umbes minuti aja' : 'umbes minut aega' },
                                            ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:12
 12:   minutes: function (n, d) { return d < 0 ? '%d minuti' : '%d minutit' },
                                         ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 12:   minutes: function (n, d) { return d < 0 ? '%d minuti' : '%d minutit' },
                                             ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:13
 13:   hour: function (n, d) { return d < 0 ? 'umbes tunni aja' : 'umbes tund aega' },
                                      ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 13:   hour: function (n, d) { return d < 0 ? 'umbes tunni aja' : 'umbes tund aega' },
                                          ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:14
 14:   hours: function (n, d) { return d < 0 ? '%d tunni' : '%d tundi' },
                                       ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 14:   hours: function (n, d) { return d < 0 ? '%d tunni' : '%d tundi' },
                                           ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:15
 15:   day: function (n, d) { return d < 0 ? 'umbes päeva' : 'umbes päev' },
                                     ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 15:   day: function (n, d) { return d < 0 ? 'umbes päeva' : 'umbes päev' },
                                         ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:17
 17:   month: function (n, d) { return d < 0 ? 'umbes kuu aja' : 'umbes kuu aega' },
                                       ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 17:   month: function (n, d) { return d < 0 ? 'umbes kuu aja' : 'umbes kuu aega' },
                                           ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:18
 18:   months: function (n, d) { return d < 0 ? '%d kuu' : '%d kuud' },
                                        ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 18:   months: function (n, d) { return d < 0 ? '%d kuu' : '%d kuud' },
                                            ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:19
 19:   year: function (n, d) { return d < 0 ? 'umbes aasta aja' : 'umbes aasta aega' },
                                      ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 19:   year: function (n, d) { return d < 0 ? 'umbes aasta aja' : 'umbes aasta aega' },
                                          ^ number

node_modules/react-timeago/lib/language-strings/et.js.flow:20
 20:   years: function (n, d) { return d < 0 ? '%d aasta' : '%d aastat' }
                                       ^ undefined (too few arguments, expected default/rest parameters). Cannot be compared to
 20:   years: function (n, d) { return d < 0 ? '%d aasta' : '%d aastat' }
                                           ^ number

When the time hits values ending with a 1, it would singularize the phrase. This also present a problem where phrases like
21 seconds/hours ago would be outputted as 21 second/hour ago.
31 seconds/hours ago would be outputted as 31 second/hour ago.
and so forth.

For the time being, I've fixed the issue with a custom formatter.

Doing <TimeAgo date={new Date(item.get('epoch')*1000)} /> works, but passing in the raw unix timestamp just returns 47 years ago for timestamps. I can make a pr :)

I am getting error on new version of react 15.0.0
Module not found: Error: Cannot resolve module 'react/lib/Object.assign'
Changing require('react/lib/Object.assign') to require('object-assign') solves the issue (I am on mobile so I can't make PR)
Thanks

The minPeriod argument actually takes milliseconds, rather than seconds. Which is really frustrating because until you discover this, it simply appears as if minPeriod doesn't work at all.

not work in mobile chrome