A auto-updated vuejs and reactjs relative time component

A auto-updated vuejs and reactjs relative time component

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

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

gzip size

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

gzip size

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

name type description
time Date or number the time
locale Locale[] the locale object

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

Download Details:

Author: plantain-00

Source Code: https://github.com/plantain-00/relative-time-component

vuejs vue javascript react reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

A Reactjs and Vuejs Tree Component

tree-component .A reactjs and vuejs tree component.

A Vuejs and Reactjs Select Component

select2-component A vuejs and reactjs select component

A Vuejs and Reactjs Tour Component

tour-component .A vuejs and reactjs tour component.

Vue vs. React: The Future of Front-End Development

In this post, we'll discuss the strengths and weaknesses of Vue.js and React.js, and also what the future holds for both in Frontend Development. Vue.js and React.js are two popular frontend JavaScript frameworks among web developers worldwide at present