⌗ pricing-paper

A react pricing component to easily integrate in your application. ✨

Features

• Create pricing page in 10 line of code 🥳
• Lightweight ⚡
• Easy to use 🐥
• fully customizable style ⚒️

Install

Via package managers:

npm i pricing-paper

Example Usage

import Pricing from 'pricing-paper'

const firstPlan = {
  'title': 'Demo 1',
  'price': 'FREE'
}
const popularPlan = {
  'title': 'Demo 2',
  'price': '$54'
}

const lastPlan = {
  'title': 'Demo 3',
  'price': '$99'
}

const firstFeatures = [
  {
    'name': 'First Features',
    'applicable': true
  },
  {
    'name': 'First Features',
    'applicable': true
  },
  {
    'name': 'First Features',
    'applicable': false
  },
  {
    'name': 'First Features',
    'applicable': true
  },
  {
    'name': 'First Features',
    'applicable': false
  },


]

const popularFeatures = [
  {
    'name': 'Popular Features',
    'applicable': true
  },
  {
    'name': 'Popular Features',
    'applicable': true
  },
  {
    'name': 'Popular Features',
    'applicable': true
  },
  {
    'name': 'Popular Features',
    'applicable': true
  },
  {
    'name': 'Popular Features',
    'applicable': true
  },


]

const lastFeatures = [
  {
    'name': 'Last Features',
    'applicable': true
  },
  {
    'name': 'Last Features',
    'applicable': true
  },
  {
    'name': 'Last Features',
    'applicable': true
  },
  {
    'name': 'Last Features',
    'applicable': true
  },
  {
    'name': 'last Features',
    'applicable': true
  },


]

const styles = {
  'planCard': {
    backgroundColor: '#ffebb3'

  },
  'planHeroCard': {

  },
  'planCardTitle': {

  },
  'planCardPrice': {

  },
  'planButton': {

  },
  'badge': {
    
  }
}

const alertMe = () => {
  alert("Hi")
}

 <Pricing firstPlan={firstPlan}
      popularPlan={popularPlan}
      lastPlan={lastPlan}
      firstFeatures={firstFeatures}
      popularFeatures={popularFeatures}
      lastFeatures={lastFeatures}
      styles={styles}  
      buttonValue={"Buy Now"}
      handleClick={alertMe}
  />

Props

| Prop | Type | Requirement |Description | | --------- | --------- | ------------ | --------------------------------------------------- | | firstPlan | object | required | object of name and price | | popularPlan| object | required | object of name and price | | lastPlan| object | required | object of name and price | | firstFeatures| Array | required | Array of Features | | popularFeatures| Array | required | Array of Features | | lastFeatures| Array | required | Array of Features | | styles| object | optional | object of React style | | buttonValue| string | required | Button Text | | handleClick| function | optional | Button click event | | buttonDisabled| boolean | optional | true or false |

Contributing

Feel free to submit any issues or pull request 🙂