Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
@ampproject/amp-timeago
Advanced tools
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
. It can be used as a web component <bento-timeago>
, or as a Preact/React functional component <BentoTimeago>
.
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 preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-timeago
import '@ampproject/bento-timeago';
[/example]
<script>
[example preview="top-frame" playground="false"]
<head>
<script async custom-element="bento-timeago" src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"></script>
<style data-bento-boilerplate>
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>
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 data-bento-boilerplate>
bento-timeago {
display: block;
overflow: hidden;
position: relative;
}
</style>
datetime
The required datetime
attribute sets the date and time. The value must be an ISO datetime.
2017-03-10T01:00:00Z
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.
The examples below demonstrates use of the <BentoTimeago>
as a functional component usable with the Preact or React libraries.
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-date-display
import React from 'react';
import { BentoTimeago } from '@ampproject/bento-timeago/react';
import '@ampproject/bento-timeago/styles.css';
function App() {
return (
<BentoTimeago
datetime={dateTime}
locale={locale}
cutoff={cutoff}
placeholder={placeholder}
/>
);
}
[/example]
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.
datetime
The required datetime
prop sets the date and time. The value must be an ISO datetime.
2017-03-10T01:00:00Z
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.
FAQs
AMP HTML amp-timeago Component
The npm package @ampproject/amp-timeago receives a total of 73 weekly downloads. As such, @ampproject/amp-timeago popularity was classified as not popular.
We found that @ampproject/amp-timeago demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.