This package has been deprecated

Author message:

Deprecated in favor of @fdmg/fd-opening-teaser

fdmg-ts-react-opening-teaser

ReactJS OpeningTeaser component. This component renders an opening teaser.

Installation

• Run npm i --save-dev @fdmg/ts-react-opening-teaser

or

• Run yarn add @fdmg/ts-react-opening-teaser --dev

Usage

TypeScript

import * as React from 'react';
import OpeningTeaser from '@fdmg/ts-react-opening-teaser';

export default class foo {
    public state: any;
    public props: any;

    constructor(props: any) {
        super(props);
        this.props = props;
    }

    render() {
        return (
            <OpeningTeaser
                id='1'
                className='teaser opening-teaser'
                href='/beurs/1233222/afm-onderzoekt-deloitte-in-steinhoff-affaire'
                pictureSources={[{
                    media: '(max-width:640px)',
                    srcSet: 'https://images.fd.nl/mTautQo5fN4kWUSMkw9QS43M1Gk.jpg?fit=crop&amp;crop=faces&amp;auto=format%2ccompress&amp;q=45&amp;w=599&amp;h=337&amp;rect=.0%2c.0393996247654784%2c.9999999999999999%2c.8442776735459663',
                }, {
                    media: '(max-width:860px)',
                    srcSet: 'https://images.fd.nl/mTautQo5fN4kWUSMkw9QS43M1Gk.jpg?fit=crop&amp;crop=faces&amp;auto=format%2ccompress&amp;q=45&amp;w=723&amp;h=406&amp;rect=.0%2c.0393996247654784%2c.9999999999999999%2c.8442776735459663',
                }, {
                    media: '(min-width:861px)',
                    srcSet: 'https://images.fd.nl/mTautQo5fN4kWUSMkw9QS43M1Gk.jpg?fit=crop&amp;crop=faces&amp;auto=format%2ccompress&amp;q=45&amp;w=719&amp;h=404&amp;rect=.0%2c.0393996247654784%2c.9999999999999999%2c.8442776735459663',
                }]}
                defaultImageUrl='https://images.fd.nl/mTautQo5fN4kWUSMkw9QS43M1Gk.jpg?fit=crop&amp;crop=faces&amp;auto=format%2ccompress&amp;q=45&amp;w=599&amp;h=337&amp;rect=.0%2c.0393996247654784%2c.9999999999999999%2c.8442776735459663'
                prefix='beurs'
                time='1 uur'
                title='AFM onderzoekt rol Deloitte in Steinhoff-affaire'
                intro='Toezichthouder bekijkt controles van de jaarrekeningen van Zuid-Afrikaanse meubelgigant.'
                relatedArticles={[{
                    href: '/ondernemen/1232430/steinhoff-affaire-legt-grauwsluier-over-succes-deloitte',
                    title: 'Steinhoff-affaire legt grauwsluier over succes Deloitte'
                }, {
                    href: '/ondernemen/1232430/steinhoff-affaire-legt-grauwsluier-over-succes-deloitte',
                    title: 'Steinhoff-affaire legt grauwsluier over succes Deloitte'
                }]}
                dataDate='13:49'
                shareCount='24'
            />
        );
    }
}

Resulting HTML

<article
  className="teaser opening-teaser has-related"
  id="1"
>
  <a
    aria-label="Link naar AFM onderzoekt rol Deloitte in Steinhoff-affaire"
    className="has-image"
    href="/beurs/1233222/afm-onderzoekt-deloitte-in-steinhoff-affaire"
    onClick={undefined}
    tabIndex={0}
    target={undefined}
    title="AFM onderzoekt rol Deloitte in Steinhoff-affaire"
  >
    <figure>
      <picture>
        <source
          media="(max-width:640px)"
          srcSet="https://images.fd.nl/mTautQo5fN4kWUSMkw9QS43M1Gk.jpg?fit=crop&amp;crop=faces&amp;auto=format%2ccompress&amp;q=45&amp;w=599&amp;h=337&amp;rect=.0%2c.0393996247654784%2c.9999999999999999%2c.8442776735459663"
        />
        <source
          media="(max-width:860px)"
          srcSet="https://images.fd.nl/mTautQo5fN4kWUSMkw9QS43M1Gk.jpg?fit=crop&amp;crop=faces&amp;auto=format%2ccompress&amp;q=45&amp;w=723&amp;h=406&amp;rect=.0%2c.0393996247654784%2c.9999999999999999%2c.8442776735459663"
        />
        <source
          media="(min-width:861px)"
          srcSet="https://images.fd.nl/mTautQo5fN4kWUSMkw9QS43M1Gk.jpg?fit=crop&amp;crop=faces&amp;auto=format%2ccompress&amp;q=45&amp;w=719&amp;h=404&amp;rect=.0%2c.0393996247654784%2c.9999999999999999%2c.8442776735459663"
        />
        <img
          alt="Teaser image"
          className={undefined}
          src="https://images.fd.nl/mTautQo5fN4kWUSMkw9QS43M1Gk.jpg?fit=crop&crop=faces&auto=format%2ccompress&q=45&w=599&h=337&rect=.0%2c.0393996247654784%2c.9999999999999999%2c.8442776735459663"
        />
      </picture>
      <span
        className="audio-icon"
      />
    </figure>
    <div
      className="meta"
    >
      <span
        className="prefix"
      >
        beurs
      </span>
      <time>
        1 uur
      </time>
    </div>
    <div
      className="text-container"
    >
      <h1
        className={undefined}
      >
        AFM onderzoekt rol Deloitte in Steinhoff-affaire
      </h1>
      <p
        className="intro"
      >
        Toezichthouder bekijkt controles van de jaarrekeningen van Zuid-Afrikaanse meubelgigant.
      </p>
    </div>
  </a>
  <nav
    className="related"
  >
    <a
      aria-label="Link naar Steinhoff-affaire legt grauwsluier over succes Deloitte"
      className={undefined}
      href="/ondernemen/1232430/steinhoff-affaire-legt-grauwsluier-over-succes-deloitte"
      onClick={undefined}
      tabIndex={0}
      target={undefined}
      title="Steinhoff-affaire legt grauwsluier over succes Deloitte"
    >
      <span
        className="related-title"
      >
        Steinhoff-affaire legt grauwsluier over succes Deloitte
      </span>
      <i
        className="ico ico-chevron-right"
      />
    </a>
  </nav>
  <footer>
    <menu>
      <span
        className="share-social"
        data-id="1"
        data-intro="Toezichthouder bekijkt controles van de jaarrekeningen van Zuid-Afrikaanse meubelgigant."
        data-title="AFM onderzoekt rol Deloitte in Steinhoff-affaire"
        data-url="https://fd.nl/1"
        title="delen"
      >
        <i
          className="ico ico-share"
        />
        <span
          className="content"
        >
          24
        </span>
      </span>
      <span
        className="favorite"
        data-addurl="/add-favorite"
        data-articleid="1"
        data-date="13:49"
        data-deleteurl="/delete-favorite"
        data-key="1"
        data-title="AFM onderzoekt rol Deloitte in Steinhoff-affaire"
        data-url="/beurs/1233222/afm-onderzoekt-deloitte-in-steinhoff-affaire"
        id="favorite1"
        title="Favoriet"
      >
        <i
          className="ico ico-bookmark-o"
        />
        <i
          className="ico ico-bookmark"
        />
        <span
          className="content"
        />
      </span>
      <a
        className="commentCount hidden"
        data-articleid="1"
        href="/beurs/1233222/afm-onderzoekt-deloitte-in-steinhoff-affaire#comments"
      >
        <i
          className="ico ico-comment-o commentCount_icon"
        />
        <span
          className="commentCount_content"
        />
      </a>
    </menu>
  </footer>
</article>