A auto-updated vuejs and reactjs relative time component.
MIT License
A auto-updated vuejs, reactjs and react-native relative time component.
npm i relative-time-vue-component
import { RelativeTime } from "relative-time-vue-component";
app.component('relative-time', RelativeTime)
or
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/tree-vue-component/dist/relative-time-vue-component.min.js"></script>
<relative-time :time="time">
</relative-time>
the online demo: https://plantain-00.github.io/relative-time-component/packages/vue/demo
npm i relative-time-react-component
import { RelativeTime } from "relative-time-react-component";
or
<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/tree-react-component/dist/relative-time-react-component.min.js"></script>
<RelativeTime time={this.time}>
</RelativeTime>
the online demo: https://plantain-00.github.io/relative-time-component/packages/react/demo
npm i relative-time-react-native-component
import { RelativeTime } from "relative-time-react-native-component";
<RelativeTime time={this.time}>
</RelativeTime>
name | type | description |
---|---|---|
time | Date or number | the time |
locale | Locale[] | the locale object |
type Locale = {
secondsAgo: (seconds: number) => string;
inSeconds: (seconds: number) => string;
oneMinuteAgo: string;
inOneMinute: string;
minutesAgo: (minutes: number) => string;
inMinutes: (minutes: number) => string;
oneHourAgo: string;
inOneHour: string;
hoursAgo: (hours: number) => string;
inHours: (hours: number) => string;
oneDayAgo: string;
inOneDay: string;
daysAgo: (days: number) => string;
inDays: (days: number) => string;
oneMonthAgo: string;
inOneMonth: string;
monthsAgo: (months: number) => string;
inMonths: (months: number) => string;
oneYearAgo: string;
inOneYear: string;
yearsAgo: (years: number) => string;
inYears: (years: number) => string;
};
// v4 vue2
import "relative-time-vue-component";
// v5 vue3
import { RelativeTime } from "relative-time-vue-component";
app.component('relative-time', RelativeTime)
# v3
npm i relative-time-component
# v4
npm i relative-time-vue-component
npm i relative-time-react-component
npm i relative-time-angular-component
// v3
import "relative-time-component/vue";
import { RelativeTime } from "relative-time-component/react";
import { RelativeTimeModule } from "relative-time-component/angular";
// v4
import "relative-time-vue-component";
import { RelativeTime } from "relative-time-react-component";
import { RelativeTimeModule } from "relative-time-angular-component";
// v2 angular AOT:
import { RelativeTimeModule } from "relative-time-component/angular";
// v3 angular AOT:
import { RelativeTimeModule } from "relative-time-component/aot/angular";
// v2
import "relative-time-component/vue";
// v1
import "relative-time-component/dist/vue";