relative-time-component

A auto-updated vuejs, reactjs and react-native relative time component.

features

• vuejs component
• reactjs component
• react-native component
• auto update
• multi-language

vuejs 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

reactjs component

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

react-native component

npm i relative-time-react-native-component

import { RelativeTime } from "relative-time-react-native-component";

<RelativeTime time={this.time}>
</RelativeTime>

properties and events of the component

relative-time locale structure

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;
};

change logs

// 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";