1.2305051745.1 • Published 12 months ago

@bentoproject/timeago v1.2305051745.1

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
12 months ago

Bento Timeago

The Bento Timeago component can count up to, or away from, a specified date and time. It replaces the text node with a fuzzy timestamp, such as in 30 years or 3 hours ago.

Usage

Web Component

You must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See Layout and Style.

The examples below demonstrate use of the <bento-timeago> web component.

Example: Import via npm

Install via npm:

npm install @bentoproject/timeago
import {defineElement as defineBentoTimeago} from '@bentoproject/timeago';
defineBentoTimeago();

Example: Import via <script>

<head>
  <script src="https://cdn.ampproject.org/bento.js"></script>
  <script
    async
    src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"
  ></script>
  <style>
    bento-timeago {
      display: block;
      overflow: hidden;
      position: relative;
    }
  </style>
</head>
<bento-timeago id="my-timeago" datetime="2017-04-11T00:37:33.809Z" locale="en">
  Saturday 11 April 2017 00.37
</bento-timeago>
<div class="buttons" style="margin-top: 8px">
  <button id="ar-button">Change locale to Arabic</button>
  <button id="en-button">Change locale to English</button>
  <button id="now-button">Change time to now</button>
</div>

<script>
  (async () => {
    const timeago = document.querySelector('#my-timeago');
    await customElements.whenDefined('bento-timeago');

    // set up button actions
    document.querySelector('#ar-button').onclick = () =>
      timeago.setAttribute('locale', 'ar');
    document.querySelector('#en-button').onclick = () =>
      timeago.setAttribute('locale', 'en');
    document.querySelector('#now-button').onclick = () =>
      timeago.setAttribute('datetime', 'now');
  })();
</script>

Layout and style

Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-timeago-1.0.css"
/>

Alternatively, you may also make the light-weight pre-upgrade styles available inline:

<style>
  bento-timeago {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

Attributes

datetime

The required datetime attribute sets the date and time. The value must be an ISO datetime.

  • Express time in UTC (Coordinated Universal Time): 2017-03-10T01:00:00Z
  • Express in local time with a time zone offset: 2017-03-09T20:00:00-05:00
locale (optional)

Add the locale attribute to specify one of the following values to change the locale. The default value is en.

  • ar (Arabic)
  • be (Belarusian)
  • bg (Bulgarian)
  • bn-IN (Bangla)
  • ca (Catalan)
  • cs (Czech)
  • da (Danish)
  • de (German)
  • el (Greek)
  • en (English)
  • en-short (English - short)
  • es (Spanish)
  • eu (Basque)
  • fa (Persian - Farsi)
  • fi (Finnish)
  • fr (French)
  • gl (Galician)
  • he (Hebrew)
  • hi-IN (Hindi)
  • hu (Hungarian)
  • id-ID (Malay)
  • it (Italian)
  • ja (Japanese)
  • ka (Georgian)
  • ko (Korean)
  • ml (Malayalam)
  • my (Burmese - Myanmar)
  • nb-NO (Norwegian Bokmål)
  • nl (Dutch)
  • nn-NO (Norwegian Nynorsk)
  • pl (Polish)
  • pt-BR (Portuguese)
  • ro (Romanian)
  • ru (Russian)
  • sq (Albanian)
  • sr (Serbian)
  • sv (Swedish)
  • ta (Tamil)
  • th (Thai)
  • tr (Turkish)
  • uk (Ukrainian)
  • vi (Vietnamese)
  • zh-CN (Chinese)
  • zh-TW (Taiwanese)
cutoff

Add the cutoff attribute to display the date specified in the datatime attribute after passing the specified date in seconds.

Preact/React Component

The examples below demonstrates use of the <BentoTimeago> as a functional component usable with the Preact or React libraries.

Example: Import via npm

Install via npm:

npm install @bentoproject/timeago
import React from 'react';
import {BentoTimeago} from '@bentoproject/timeago/react';
import '@bentoproject/timeago/styles.css';

function App() {
  return (
    <BentoTimeago
      datetime={dateTime}
      locale={locale}
      cutoff={cutoff}
      placeholder={placeholder}
    />
  );
}

Layout and style

The Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, <style> tags, Preact/React components that import their own stylesheets.

Props
datetime

The required datetime prop sets the date and time. The value must be an ISO datetime.

  • Express time in UTC (Coordinated Universal Time): 2017-03-10T01:00:00Z
  • Express in local time with a time zone offset: 2017-03-09T20:00:00-05:00
locale (optional)

Add the locale prop to one of the following values to change the locale. The default value is en.

  • ar (Arabic)
  • be (Belarusian)
  • bg (Bulgarian)
  • bn-IN (Bangla)
  • ca (Catalan)
  • cs (Czech)
  • da (Danish)
  • de (German)
  • el (Greek)
  • en (English)
  • en-short (English - short)
  • es (Spanish)
  • eu (Basque)
  • fa (Persian - Farsi)
  • fi (Finnish)
  • fr (French)
  • gl (Galician)
  • he (Hebrew)
  • hi-IN (Hindi)
  • hu (Hungarian)
  • id-ID (Malay)
  • it (Italian)
  • ja (Japanese)
  • ka (Georgian)
  • ko (Korean)
  • ml (Malayalam)
  • my (Burmese - Myanmar)
  • nb-NO (Norwegian Bokmål)
  • nl (Dutch)
  • nn-NO (Norwegian Nynorsk)
  • pl (Polish)
  • pt-BR (Portuguese)
  • ro (Romanian)
  • ru (Russian)
  • sq (Albanian)
  • sr (Serbian)
  • sv (Swedish)
  • ta (Tamil)
  • th (Thai)
  • tr (Turkish)
  • uk (Ukrainian)
  • vi (Vietnamese)
  • zh-CN (Chinese)
  • zh-TW (Taiwanese)
cutoff

Add the cutoff prop to display the date specified in the datetime prop after passing the specified date in seconds.

placeholder

Add the placeholder props to display the fallback text. The calculated timestamp will replace the placeholder text once ready.

@bentoproject/core
@infinitebrahmanuniverse/nolb-_ben@everything-registry/sub-chunk-121@zalastax/nolb-_ben
1.2305051745.1

12 months ago

1.2305051745.0

1 year ago

1.2305022024.0

1 year ago

1.2305232041.0

12 months ago

1.2305152039.0

12 months ago

1.2305241828.0

12 months ago

1.2305182038.0

12 months ago

1.2305221508.0

12 months ago

1.2304212144.0

1 year ago

1.2304262219.0

1 year ago

1.2304122229.0

1 year ago

1.2304241924.0

1 year ago

1.2304132133.0

1 year ago

1.2302171719.0

1 year ago

1.2303231800.0

1 year ago

1.2303151621.0

1 year ago

1.2304062309.0

1 year ago

1.2302271541.0

1 year ago

1.2303151529.0

1 year ago

1.2304040531.0

1 year ago

1.2302031721.0

1 year ago

1.2301301810.0

1 year ago

1.2301041800.0

1 year ago

1.2301112346.0

1 year ago

1.2302021743.0

1 year ago

1.2301031703.0

1 year ago

1.2301181928.0

1 year ago

1.2301032153.0

1 year ago

1.2301261900.0

1 year ago

1.2301100345.0

1 year ago

1.2302012254.0

1 year ago

1.2212151632.2

1 year ago

1.2211042305.0

2 years ago

1.2211111611.0

1 year ago

1.2211060024.0

2 years ago

1.2210191347.0

2 years ago

1.2211302304.0

1 year ago

1.2211302304.2

1 year ago

1.2211302304.1

1 year ago

1.2211151402.0

1 year ago

1.2210251605.0

2 years ago

1.2210272257.0

2 years ago

1.2211182146.0

1 year ago

1.2211250451.0

1 year ago

1.2210172057.0

2 years ago

1.2212092023.0

1 year ago

1.2212151632.1

1 year ago

1.2210211855.0

2 years ago

1.2212151632.0

1 year ago

1.2212071834.0

1 year ago

1.2210142102.0

2 years ago

1.2210041838.0

2 years ago

1.2210112333.0

2 years ago

1.2210052034.0

2 years ago

1.2210010655.0

2 years ago

1.2210071758.0

2 years ago

1.2208242209.0

2 years ago

1.2208242209.1

2 years ago

1.2209142312.0

2 years ago

1.2209072154.0

2 years ago

1.2209131909.0

2 years ago

1.2208172101.0

2 years ago

1.2207201724.0

2 years ago

1.2205270638.4

2 years ago

1.2206071918.0

2 years ago

1.2206071918.1

2 years ago

1.2205120110.1

2 years ago

1.2205270638.0

2 years ago

1.2206131450.0

2 years ago

1.2207071723.0

2 years ago

1.2208121708.0

2 years ago

1.2208021808.0

2 years ago

1.2206291614.0

2 years ago

1.2207181727.0

2 years ago

1.2208042017.0

2 years ago

1.2205232225.0

2 years ago

1.2207261725.0

2 years ago

1.2208112015.0

2 years ago

1.2206082301.0

2 years ago

1.2208081650.0

2 years ago

1.2208092047.0

2 years ago

1.2206221455.0

2 years ago

1.2207221643.0

2 years ago

1.2208051912.0

2 years ago

1.2208051912.1

2 years ago

1.2206072228.0

2 years ago

1.2207281718.2

2 years ago

1.2207281718.1

2 years ago

1.2207281718.0

2 years ago

1.2206101637.0

2 years ago

1.2205251942.0

2 years ago

1.2206162023.0

2 years ago

1.2204281949.0

2 years ago

1.2205120110.0

2 years ago

1.2205051832.0

2 years ago

1.2205101904.0

2 years ago

1.2205041533.0

2 years ago

1.2205181800.0

2 years ago

1.2204252045.0

2 years ago

1.2204292129.0

2 years ago

1.2204272205.0

2 years ago

1.2205090810.0

2 years ago

1.2205161914.0

2 years ago

1.2205191749.0

2 years ago

1.2205031420.0

2 years ago

1.2203101844.0

2 years ago

1.2204182206.0

2 years ago

1.2203151539.0

2 years ago

1.2203281422.0

2 years ago

1.2204122000.0

2 years ago

1.2203221937.0

2 years ago

1.2204221712.0

2 years ago

1.2203231914.0

2 years ago

1.2204160405.0

2 years ago

1.2203172113.0

2 years ago

1.2204132005.0

2 years ago

1.2204142048.0

2 years ago

1.2204211736.0

2 years ago

1.2203041950.0

2 years ago

1.2204121632.0

2 years ago

1.2204191429.0

2 years ago

1.2202230359.1

2 years ago

1.2202241911.0

2 years ago

1.2202252101.0

2 years ago

1.2201101902.0

2 years ago

1.2201042109.0

2 years ago

1.2112231523.2

2 years ago

1.2112231523.1

2 years ago

1.2112231523.0

2 years ago

1.2202162256.0

2 years ago

1.2202012258.0

2 years ago

1.2202230359.0

2 years ago

1.2111242025.1

2 years ago

1.2112062322.2

2 years ago

1.2112091956.0

2 years ago

1.2112062322.0

2 years ago

1.2202042210.0

2 years ago

1.2202042210.1

2 years ago

1.2112201724.0

2 years ago

1.2112162055.0

2 years ago

1.2112221739.0

2 years ago

1.2201061922.0

2 years ago

1.2112132331.0

2 years ago

1.2201122239.0

2 years ago

1.2202142035.0

2 years ago

1.2202152253.0

2 years ago

1.2202112230.0

2 years ago

1.2202082004.0

2 years ago

1.2201120015.0

2 years ago

1.2112082232.0

2 years ago

1.2201212122.3

2 years ago

1.2202022130.0

2 years ago

1.2202031816.0

2 years ago

1.2112212349.0

2 years ago

1.2201052144.0

2 years ago

1.2202180255.0

2 years ago

1.2112080230.1

2 years ago

1.2201262038.1

2 years ago

1.2112080230.0

2 years ago

1.2201141909.0

2 years ago

1.2201141909.1

2 years ago

1.2201141909.3

2 years ago

1.2201141909.4

2 years ago

1.2112160003.0

2 years ago

1.2201071715.0

2 years ago

1.2202072236.0

2 years ago

1.2112170012.0

2 years ago

1.2202092050.0

2 years ago

1.2201131702.0

2 years ago

1.2112102136.0

2 years ago

1.2202232232.0

2 years ago

1.2111191951.0

2 years ago

1.2111292120.0

2 years ago

1.2111180040.0

2 years ago

1.2111230636.0

2 years ago

1.2111230244.0

2 years ago

1.2111152338.2

2 years ago

1.2112010058.0

2 years ago

1.2111060251.3

2 years ago

1.2111242025.0

2 years ago

1.2111182332.0

2 years ago

1.2112032204.0

2 years ago

1.2112021656.0

2 years ago

1.2112012300.0

2 years ago

1.2111060251.9

2 years ago

1.2111022043.0

3 years ago

1.2110212130.2

3 years ago

1.2110152252.3

3 years ago

1.2111011823.0

3 years ago

1.2110290545.0

3 years ago

1.2110281959.0

3 years ago

1.2110252343.0

3 years ago

1.2110261518.0

3 years ago