Fyndiq-component-article NPM

fyndiq-component-article

An Article component for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-component-article

Components

The package fyndiq-component-article exposes several components:

Layout components are high-level components that are responsible for arranging the details in a certain way.

LayoutDetails

This layout component arranges the article in a details view, which is mobile and tablet friendly. Best used for a customer-facing interface.

Usage

import React from 'react'
import {
  Description,
  Images,
  Price,
  Tags,
  LayoutDetails,
} from 'fyndiq-component-article'

// Normal usage
<LayoutDetails
  title="My article title"
  description="My article description"
  images={[
    'http://image-url-1',
    'http://image-url-1',
  ]}
  price="$150"
  tags={['Awesomeness', 'Pretty good article']}
/>

// Advanced usage
<LayoutDetails
  images={
    <Images
      images={['src1', 'src2']}
    />
  }
  title="Article Title"
  description={<span dangerouslySetInnerHtml={{ __html: '<strong>hello</strong>' }} />}
  price={
    <Price oldPrice="$250" noEmphasize>$124</Price>
  }
  tags={<Tags tags={['Awesomeness', 'Pretty good article']} />}
/>

API

Name	Type	Description	Default value
className	String	Additionnal class for the root element
title	String	Title of the article
description	String or `Description` element	Description of the article	`null`
images	Array of string or `Images` element	Images of the article	`null`
tags	Array of string or `Tags` element	Tags of the article	`null`
price	String or `Price` element	Price of the article	`null`

Description

Description of the Article

Usage

import React from 'react'
import { Description } from 'fyndiq-component-article'

// Normal usage
<Description>My Article Description</Description>

// Pass raw HTML (useful when working with Markdown)
<Description>
  <span
    dangerouslySetInnerHtml={
      { __html: '<strong>hello</strong>' }
    }
  />
</Description>

API

Name	Type	Description	Default value
children	Node	Content of the description

Images

Images of the Article. Includes a carrousel-like interaction

Usage

import React from 'react'
import { Images } from 'fyndiq-component-article'

// Normal usage
<Images
  images={[
    'http://image-url-1',
    'http://image-url-2',
  ]}
  alt="alt text for images"
/>

API

Name	Type	Description	Default value
images	Array of strings	URL of the images	`[]`
alt	String	Alt text for the `<img>` tags	`''`

Price

Price of the Article.

Usage

import React from 'react'
import { Price } from 'fyndiq-component-article'

// Normal usage
<Price>$100</Price>

// With old price
<Price oldPrice="$150">$100</Price>

API

Name	Type	Description	Default value
children	String	Price of the article	`null`
oldPrice	String	Old price of the article	`''`
emphasize	Boolean	Show a difference in font-sizes for oldPrice and price	`true`