pricing-table-react

React Pricing Plan

An easy to use pricing table React component.

Demo

Installing Package

Npm installation:

  npm install pricing-table-react

Yarn Installation:

  yarn add pricing-table-react

How To Use

Import Plan to your project

  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:

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

Example

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