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 |