React Pricing Table
Fast, flexible, simple pricing tables in React.
## Table of Content
- [Status](#status)
- [Features](#features)
- [Installation](#installation)
- [Configuration](#configuration)
- [Compatibility](#compatibility)
- [Local Development](#local_development)
- [API](#api)
- [License](#license)
## Status
Pre-alpha and under heavy development, do not use!
## Features
- [x] :iphone: Responsive: Made mobile responsive with [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
- [ ] :white_check_mark: 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.
```js
import React from 'react';
import {PricingTable, PricingSlot, PricingDetail} from 'react-pricing-table';
class Example extends React.Component {
render() {
return ...
}
}
```
## Configuration
The basic use of the PricingTable can be described with:
```js
15 projects
5 GB storage
5 users
Time tracking
35 projects
15 GB storage
Unlimited users
Time tracking
100 projects
30 GB storage
Unlimited users
Time tracking
Unlimited projects
75 GB storage
Unlimited users
Time tracking
```
Result:
## 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](https://www.npmjs.com/package/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. |
### PricingDetail props:
| name |
type |
default |
description |
| strikethrough |
boolean |
false |
Whether to show strikethrough text decoration. |
## License
Copyright (c) 2017 Gergely Nagy and individual contributors. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.
