@ta-interaktiv/react-publication-info NPM

React Publication Info

Displays publication meta data (like publication and update date as well as version number).

API

NameValueItem
- Parameters
- Examples
PublicationInfo
- Parameters
TimestampFormatter
- Parameters
- Examples
VersionFormatter
- Parameters
- Examples

NameValueItem

Generic key-value component.

Parameters

props object
- props.name string? The name or key of the information.
- props.value string? The value. If null or undefined, the component will not render.
- props.itemClassName string? Class name(s) for the whole item. (optional, default '')
- props.nameClassName string? Class names(s) for the key part. (optional, default '')
- props.valueClassName string? Class names(s) for the value part. (optional, default '')

Examples

import { NameValueItem }from '@ta-interaktiv/react-publication-info'

function Component(props) {
  return(
    <NameValueItem
      name='Version'
      value='1.0.0'
      itemClassName='ui label'
      valueClassName='detail'
    />
  )
}

// returns <span className="name-value-item ui label">
//           <span className="name ">Version</span>
//           <span className="value detail">1.0.0</span>
//         </span>

Returns (React.Element<any> | null)

PublicationInfo

Show all information regarding a publication: when it has been first published, when it was updated, and what version it is.

Parameters

props object
- props.publicationDate string Unix timestamp when the project has been first published (optional, default window.project.publicationDate)
- props.changeDate string Unix timestamp when the project has been last updated. (optional, default window.project.changeDate)
- props.version string Version number of the project (optional, default window.project.version)
- props.className string? CSS class name of the whole object. (optional, default '')
- props.itemClassName string? CSS class names for the individual items. (optional, default '')
- props.nameClassName string? CSS class names for the key/name of the individual items. (optional, default '')
- props.valueClassName string? CSS class names for the value of the individual items. (optional, default '')

Returns React.Element<any>

TimestampFormatter

See: NameValueItem for additional className parameters to be passed into this component.

Provides a formatted timestamp, with an optional prefix. Modeled after the common article suffix on tagesanzeiger.ch articles, it will return something like "Erstellt: 25.07.2017, 11:47 Uhr" with the appropriate prefix.

Parameters

props object
- props.timestamp number? A UNIX timestamp, in seconds. If not provided, the element will not render.
- props.prefix string? A string that precedes the date, like "Erstellt:" or "Aktualisiert:"
- props.locale ("de" | "fr") The locale to use to format the string. (optional, default de)

Examples

import { TimestampFormatter } from '@ta-interaktiv/react-publication-date'

function Component (props) {
  return (
    <TimestampFormatter prefix='Erstellt:' timestamp={1500986249} />
  )
}

Returns (Element<any> | null)

VersionFormatter

See: NameValueItem for additional className props that can be passed in.

Provides a formatted version, with an optional prefix.

Parameters

props object
- props.version number A semantic version string. If not provided, the element will not render.
- props.prefix string A string that precedes the version. (optional, default Version)

Examples

import { VersionFormatter } from '@ta-interaktiv/react-publication-date'

function Component (props) {
  return (
    <VersionFormatter version='1.0.0' />
  )
}

Returns (React.Element<any> | null)