pricing-table-react/readme.md

A simple pricing plan for react

## React Pricing Plan
An easy to use pricing table React component.




## Demo

[![Omnimi-Pricing-Plan.png](https://i.postimg.cc/wjxw907k/Omnimi-Pricing-Plan.png)](https://postimg.cc/dLX2BRR7)




## Installing Package

Npm installation:

```bash
  npm install pricing-table-react
```

Yarn Installation:
```bash
  yarn add pricing-table-react
```

## How To Use
Import Plan to your project
```bash
  import { Plan } from "pricing-table-react";
```
Plan takes two arguments: Plans and Currency.

Currency is type of string and Plans is array of type PlanProps.

You can import PlanProps like below:

```bash
  import { PlanProps } from "pricing-table-react";
```

## Example

```bash
import React from "react";
import { Plan, PlanProps } from "pricing-table-react";

const plans: PlanProps[] = [
  {
    href: "/Lite",
    price: "9",
    title: "Lite Plan",
    advantages: [
      {
        text: "Clean and ease to use app",
      },
      {
        text: "Simple widget generator",
      },
    ],
    duration: "month",
    highlightText: "Popular",
    guarantee: "14 days money back guarantee",
    titleDescription: "Individual and small teams",
  },
  ...
];

function App() {
  return <Plan currency="$" Plans={plans} />;
}

export default App;
```
## Properties

| Parameter | Type     | Description                |
| :-------- | :------- | :------------------------- |
| `Currency` | `string` | **Required**. Currency sign |
| `Plans` | `PlanProps[]` | **Required**. All plans your website plans |
| `BackColor` | `string` | Background color of header and button |
| `Color` | `string` | Text color of header and button |

## PlanProps

| Parameter | Type     | Required |
| :-------- | :------- | :------- |
| `title` | `string` | `true` |
| `titleDescription` | `string` | `false` |
| `duration` | `string` | `false` |
| `highlightText` | `string` | `false` |
| `price` | `string` | `true` |
| `guarantee` | `string` | `false` |
| `href` | `string` | `true` |
| `advantages` | `PlanAdvantage[]` | `true` |

## PlanAdvantages

| Parameter | Type     | Required |
| :-------- | :------- | :------- |
| `text` | `string` | `true` |