relative-time-component v5.0.0

relative-time-component

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

features

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

vuejs component

npm i relative-time-vue-component

import "relative-time-vue-component";

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.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>

angular component

npm i relative-time-angular-component

import { RelativeTimeModule } from "relative-time-component/angular";

@NgModule({
    imports: [BrowserModule, FormsModule, RelativeTimeModule],
    declarations: [MainComponent],
    bootstrap: [MainComponent],
})
class MainModule { }

<relative-time [time]="time">
</relative-time>

the online demo: https://plantain-00.github.io/relative-time-component/packages/angular/demo/jit

the AOT online demo: https://plantain-00.github.io/relative-time-component/packages/angular/demo/aot

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

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