https://github.com/andordavoti/react-native-timeago
A super simple React Native timeago Component library using date-fns.
https://github.com/andordavoti/react-native-timeago
date-fns expo react-native typescript
Last synced: 3 months ago
JSON representation
A super simple React Native timeago Component library using date-fns.
- Host: GitHub
- URL: https://github.com/andordavoti/react-native-timeago
- Owner: andordavoti
- License: mit
- Created: 2020-09-29T14:30:24.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-10-12T21:31:01.000Z (over 5 years ago)
- Last Synced: 2025-02-20T21:47:25.896Z (over 1 year ago)
- Topics: date-fns, expo, react-native, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@andordavoti/react-native-timeago
- Size: 2.86 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @andordavoti/react-native-timeago
A simple auto-updating React Native timeago Component using [date-fns](https://date-fns.org/).
Inspired by: [react-native-timeago](https://www.npmjs.com/package/react-native-timeago) (replaced momentjs with date-fns due to momentjs now being legacy, and switched from class-based to functional).
Supports iOS, Android and Web. Written in Typescript.
## Installation
Run:
```sh
npm i @andordavoti/react-native-timeago
```
Import the module:
```js
import TimeAgo from '@andordavoti/react-native-timeago';
```
## Usage
Use it as a regular React Native Text component and pass it a Date. Other optional props can be passed which are specified bellow. There is also an Expo app example in the repo under the example folder.
```js
import React from 'react';
import TimeAgo from '@andordavoti/react-native-timeago';
const App: React.FC = () => {
return ;
};
export default App;
```
## Props
| Name | Type | Required | Description |
| :------------- | :-------: | :------: | :------------------------------------------------------------------------- |
| dateTo | `Date` | yes | date you want the component to count to (uses the current date as a start).|
| dateFrom | `Date` | optional | Overwrite the current Date as a starting point. |
| hideAgo | `boolean` | optional | Hides the "ago" text. |
| updateInterval | `number` | optional | How often the current date should update (only when using the "dateFrom" prop). Default is 60000 milliseconds |
| style | `bool` | optional | Style passed to the Text component. |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT