Set of componets for building prices section of a website.

Each component supports theming.

Install

npm i omtv-react-prices

Use cases

Minimal use case:

import {PricesContainer, PricesHeader, Price} from 'omtv-react-prices';

<PricesContainer>
  <PricesHeader>Prices</PricesHeader>
  <Price>
    <Name>p0</Name>
  </Price>
  <Price>
    <Name>p1</Name>
    <Value>120 USD</Value>
  </Price>
  <Price>
    <Name>p2</Name>
    <Value>200 USD</Value>
    <Comment>Cash only.</Comment>
  </Price>
</PricesContainer>

Prices can be grouped intto two wrappers Promos and Prices to accomplish some visual effects etc.

import {PricesContainer, Price, Promos, Prices} from 'omtv-react-prices';

<PricesContainer>
  <Prices>
    <Price>
      <Name>p0</Name>
    </Price>
    <Price>
      <Name>p1</Name>
      <Value>120 USD</Value>
    </Price>
    <Price>
      <Name>p2</Name>
      <Value>200 USD</Value>
      <Comment>Cash only.</Comment>
    </Price>
  </Prices>
  <Promos>
    <Price>
      <Name>For loyal customers</Name>
      <Value>-15%</Value>
    </Price>
  </Promos>
</PricesContainer>

For grouping pices into price categories Price component can contain sub prices:

import {Price} from 'omtv-react-prices';

<Price>
  <Name>Law consultation:</Name>
  <SubPrices>
    <Price>
      <Name>verbal</Name>
      <Value>free</Value>
      <Comment>up to half an hour</Comment>
    </Price>
    <Price>
      <Name>written</Name>
      <Value>50 USD</Value>
    </Price>
  </SubPrices>
</Price>

Start component development

1. Start webpack dev server for demo project npm run bemo.
2. Start component build with npm run start.