{"id":13403873,"url":"https://github.com/nmn/react-timeago","last_synced_at":"2025-04-13T07:23:51.698Z","repository":{"id":20189233,"uuid":"23460330","full_name":"nmn/react-timeago","owner":"nmn","description":"A simple time-ago component for ReactJs.","archived":false,"fork":false,"pushed_at":"2025-04-12T06:29:09.000Z","size":4651,"stargazers_count":1077,"open_issues_count":6,"forks_count":130,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-12T06:30:01.876Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nmn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-08-29T10:08:39.000Z","updated_at":"2025-04-12T06:28:16.000Z","dependencies_parsed_at":"2024-01-12T05:25:28.831Z","dependency_job_id":"d04e3b5a-74b0-4913-bd81-dc5b1bbbebf9","html_url":"https://github.com/nmn/react-timeago","commit_stats":{"total_commits":144,"total_committers":34,"mean_commits":4.235294117647059,"dds":0.5277777777777778,"last_synced_commit":"124bdf9b6afe4b7edbe887704306bbcdd3b8e30c"},"previous_names":["naman34/react-timeago"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nmn%2Freact-timeago","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nmn%2Freact-timeago/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nmn%2Freact-timeago/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nmn%2Freact-timeago/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nmn","download_url":"https://codeload.github.com/nmn/react-timeago/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248530272,"owners_count":21119586,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:01:35.745Z","updated_at":"2025-04-13T07:23:51.146Z","avatar_url":"https://github.com/nmn.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Components","Uncategorized","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Time / Date / Age","Uncategorized"],"readme":"![React-TimeAgo](http://naman.s3.amazonaws.com/react-timeago.png)\n\nA simple time-ago component for [React].\n\n## Usage:\n\n`react-timeago` is a very simple component that takes a `date` prop and returns a `time` element with live updating date in a time-ago format. The date will update only as often as needed. For timestamps below a minute away — every second, for timestamps up to 5 minutes away — every minute, and so on.\n\n`react-timeago` does the minimum amount of updates necessary.\n\n```jsx\n\u003cTimeAgo date=\"Aug 29, 2014\" /\u003e\n\n// OR in vanilla JS\nReact.createElement(TimeAgo, {date: 'Aug 29, 2014'})\n```\n\n## Language support\n\nSince v3.1.0 `react-timeago` now comes with support for a large number of languages out of the box.\nThis support is based on the string objects taken from `jquery-timeago` and then updated with the help of the\ncommunity. Many thanks to all those who contribute language support.\n\n### Usage\nTo use any of the languages provided, other than the default english, you will have to\nimport the language strings and build a custom formatter.\n\n```jsx\nimport TimeAgo from 'react-timeago'\nimport frenchStrings from 'react-timeago/lib/language-strings/fr'\nimport buildFormatter from 'react-timeago/lib/formatters/buildFormatter'\n\nconst formatter = buildFormatter(frenchStrings)\n\n// in your react component\n\u003cTimeAgo date='Feb 1, 1966' formatter={formatter} /\u003e\n```\n\nAnd that's it. You can also customize the language strings or provide your own.\n(pull requests are welcome too!). Of course, for maximum control you can write your\nown formatter function.\n\nFor best performance, I recommend that you build formatters that you're going to use once,\nand pass them around.\n\n## Flow Types\n\nSince v3.0.0 `react-timeago` comes with flow type definitions out of the box.\n\nIn v3.1.0, the React.PropType validations have been removed in favour of just flow types.\nFurther, many type definitions are now exported for use in your own code.\n\nLook through the source for more details.\n\n## Props\n\n#### `date` (required)\nDate is a date in the past or the future. This can be a Date Object, A UTC date-string or number of milliseconds since epoch time.\n\n#### `live` (optional)\nReact-Timeago is live by default and will auto update it's value. However, if you don't want this behaviour, you can set live:false.\n\n#### `now` (optional)\nA custom function that can be used instead of `Date.now()` to get the current value of `epochSeconds` in `formatter` below.\nThis can be specifically useful for server rendering when you want the datetime to be the same on the server and client.\n\n#### `formatter` (optional)\nA function that takes four arguments:\n  - `value` : An integer value, already rounded off\n  - `unit` : A string representing the unit in english. This could be one of:\n    - 'second'\n    - 'minute'\n    - 'hour'\n    - 'day'\n    - 'week'\n    - 'month'\n    - 'year'\n  - `suffix` : A string. This can be one of\n    - 'ago'\n    - 'from now'\n  - `epochMilliseconds`: The result of `Date.now()` or the result of a custom `now` prop.\n  - `nextFormatter`: A function that takes no arguments and gives you the result of the defaultFormatter using the same arguments above.\n\nHere are some examples of what the formatter function will receive:\n\n- '5 minutes ago' =\u003e formatter(5, 'minute', 'ago')\n- '1 year from now' =\u003e formatter(1, 'year', 'from now')\n\nThe formatter function is a simple way to extend the functionality of React-Timeago to support any feature you may need from a fuzzy time display.\nThe formatter function is expected to return a string.\nBut it can also return any React component (or array of components) that would become the child of React-TimeAgo\n\nThe project comes with a set of languages and a formatter function builder based on those language strings.\nYou can customize the strings, or provide your own custom formatter function.\n\nI recommend using the fantastic [L10ns](http://l10ns.org) for other internationalization needs.\n\n#### `component` (optional) (default: 'time')\nA string of ReactClass that is used to wrap the live updating string\n\n#### `title` (optional)\nIf the component is left as the default 'time' component, a title attribute is passed to it.\nYou can customize this by passing a string, or a UTC date-string will be used based on\nthe given date.\n\n#### `minPeriod` (optional) (default: 0)\nThe minimum number of seconds that the component should wait before updating. The component will still update if you pass new props.\nUse this if, for example, you don't want to update every second for recent times.\n\n#### `maxPeriod` (optional) (default: Infinity)\nThe opposite of minPeriod. Use this to force dates to update more often than the default behaviour.\nFor example, you can use this update a time every 5 minutes even after it is more than an hour old.\n\n#### Anything Else? (optional)\nAs of v2.0 you can pass in any props. Any props not used by React-TimeAgo will be passed down to the resulting component.\nThis means that you can pass className, styles, id, title, aria-label, event handlers or anything else you want.\n\n## Why React-TimeAgo\n\nReact-TimeAgo focuses on speed, and simplicity. At about 100 lines of code, the file size is extremely small. There are many similar libraries, but most of them come with large dependencies that aren't worth it for such a simple use case.\n\nIn the spirit of NPM and keeping libraries small, any additional features you may need from TimeAgo can be plugged-in using the formatter function.\n\nIn the future, I will be writing formatter functions for various languages, that can be required and passed-in as needed.\nAs you will only require the parts you actually use, there will be no need to bloat your JavaScript.\n\nReact-TimeAgo is also set apart from its competitors in that it is one of the only time-ago components that can update itself live.\n\n\n## Contribution\n\nWhile the code is complete and pretty stable, I welcome issues and pull requests.\n\nReact-TimeAgo is feature complete from my point of view (discussions welcome).\n\nHowever, support for various languages can always be improved. So please, contribute strings for the language(s) you're fluent in. I'm specifically looking for strings for the unit 'week'. `jquery-timeago` did not support weeks in its strings, and so in all but the default English, weeks get down-converted to days instead. Help me fix that.\n\n### Changelog and Versioning\n\nAfter contributing your feature or fix, please update the [changelog](/CHANGELOG.md) describing your change. Don't forget to version `package.json` as well, as the package follows [SemVer] strictly.\n\nSee [CHANGELOG.md](/CHANGELOG.md).\n\n[React]: https://reactjs.org/\n[SemVer]: https://semver.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnmn%2Freact-timeago","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnmn%2Freact-timeago","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnmn%2Freact-timeago/lists"}