pricing-table-react
TypeScript icon, indicating that this package has built-in type declarations

1.1.5 • Public • Published

React Pricing Plan

An easy to use pricing table React component.

Demo

Omnimi-Pricing-Plan.png

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.1.5
    2
    • latest

Version History

Package Sidebar

Install

npm i pricing-table-react

Weekly Downloads

2

Version

1.1.5

License

MIT

Unpacked Size

31.8 kB

Total Files

14

Last publish

Collaborators

  • omnimi