Nine-Pin Masters

    react-pricing-tables

    1.0.4 • Public • Published

    React Pricing Tables

    Fast, flexible, simple pricing tables in React.
    Improved version of react-pricing-table by Gergely Nagy


    Table of Content

    Status

    Pre-alpha and under heavy development, do not use!

    Features

    • 📱 Responsive: Made mobile responsive with Flexbox
    • Test: Adding tests.
    • Website:

    Installation

    The package can be installed via NPM:

    npm install react-pricing-table --save
    

    You’ll need to install React separately since those dependencies aren’t included in the package. Below is a simple example on how to use the PricingTable in a React view.

    import React from 'react';
    import {PricingTable, PricingSlot, PricingDetail} from 'react-pricing-table';
     
    class Example extends React.Component {
     
      render() {
        return  <PricingTable  highlightColor='#f44336'> ... </PricingTable>
      }
    }

    Configuration

    The basic use of the PricingTable can be described with:

    <PricingTable  highlightColor='#1976D2'>
        <PricingSlot  onClick={this.submit} buttonText='TRY IT FREE' title='FREE' priceText='$0/month'>
            <PricingDetail> <b>15</b> projects</PricingDetail>
            <PricingDetail> <b>5 GB</b> storage</PricingDetail>
            <PricingDetail> <b>5</b> users</PricingDetail>
            <PricingDetail strikethrough> <b>Time tracking</b></PricingDetail>
        </PricingSlot>
        <PricingSlot highlighted onClick={this.submit} buttonText='SIGN UP' title='BASIC' priceText='$24/month'>
            <PricingDetail> <b>35</b> projects</PricingDetail>
            <PricingDetail> <b>15 GB</b> storage</PricingDetail>
            <PricingDetail> <b>Unlimited</b> users</PricingDetail>
            <PricingDetail> <b>Time tracking</b></PricingDetail>
        </PricingSlot>
        <PricingSlot  onClick={this.submit} buttonText='SIGN UP' title='PROFESSIONAL' priceText='$99/month'>
            <PricingDetail> <b>100</b> projects</PricingDetail>
            <PricingDetail> <b>30 GB</b> storage</PricingDetail>
            <PricingDetail> <b>Unlimited</b> users</PricingDetail>
            <PricingDetail> <b>Time tracking</b></PricingDetail>
        </PricingSlot>
        <PricingSlot  onClick={this.submit} buttonText='SIGN UP' title='ENTERPRISE' priceText='$200/month'>
            <PricingDetail> <b>Unlimited</b> projects</PricingDetail>
            <PricingDetail> <b>75 GB</b> storage</PricingDetail>
            <PricingDetail> <b>Unlimited</b> users</PricingDetail>
            <PricingDetail> <b>Time tracking</b></PricingDetail>
        </PricingSlot>
    </PricingTable>

    Result: react-pricing-table

    Compatibility

    React

    We're always trying to stay compatible with the latest version of React. We can't support all older versions of React, since React is still < 1.0 and introducing breaking changes every release.

    Browser Support

    The react pricing table is compatible with the latest versions of Chrome, Firefox, and IE11+.

    Unfortunately it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.

    Local Development

    The master branch contains the latest version of the PricingTable component. To start your example app, you can run yarn start. This starts a simple webserver on http://localhost:8080.

    You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that covers the basic functionality. Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.

    The examples

    The examples are hosted within the docs folder and are ran in the simple add that loads the PricingTable. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.

    API

    PricingTable props:

    name type default description
    highlightColor string #f44336 Color of the highlighted slot and buttons.

    PricingSlot props:

    name type default description
    onClick function Function to be called when the button is clicked.
    title string Title of this slot.
    priceText string Label for the price.
    buttonClass string button-submit Custom styles for the Button.
    buttonText string Label for the Button.
    highlighted boolean false Whether to show highlighted header.
    shouldDisplayButton boolean true Whether to show button.

    PricingDetail props:

    name type default description
    strikethrough boolean false Whether to show strikethrough text decoration.

    License

    Copyright (c) 2020 Zohaib Ahmad Licensed under MIT license, see LICENSE for the full license.

    Install

    npm i react-pricing-tables

    DownloadsWeekly Downloads

    54

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    563 kB

    Total Files

    33

    Last publish

    Collaborators

    • mezohaib