New Patch, Merge?

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

    1.0.1 • Public • Published

    Pricing table for React

    A simple and easy to use react pricing table

    Installation

    Requires React 16 or later

    npm i --save @aiherrera/react-pricing-table

    # or

    yarn add @aiherrera/react-pricing-table

    Demo

    You can check all the configurations in this Ai-CoderLab

    Usage

    { PricingTable }

    // ES5 syntax
    const PricingTable = require('@aiherrera/react-pricing-table')
    
    // ES6 syntax
    import PricingTable from '@aiherrera/react-pricing-table'
    
    

    Full example

    import React from 'react'
    import { IoCheckmark } from 'react-icons/io5'
    
    import PricingTable from '@aiherrera/react-pricing-table'
    
    const App = () => {
    
      const plans = [
        {
          id: 'basic',
          circle: 'B',
          title: 'Basic',
          subtitle: 'Best for personal websites',
          price: 'MX$8,000',
          discount: 'MX$6,500',
          buttonText: 'Select plan',
          popular: false,
          features: (
            <ul>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
            </ul>
          )
        },
        {
          id: 'standard',
          circle: 'S',
          title: 'Standard',
          subtitle: 'Optimized for startups',
          price: 'MX$12,000',
          buttonText: 'Select plan',
          popular: true,
          features: (
            <ul>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
            </ul>
          )
        },
        {
          id: 'premium',
          circle: 'E',
          title: 'Premium',
          subtitle: 'Enterprise class website',
          price: 'MX15,000',
          buttonText: 'Select plan',
          popular: false,
          features: (
            <ul>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
              <li>
                <IoCheckmark />
                <span>Lorem Ipsum</span>
              </li>
            </ul>
          )
        }
      ]
    
      const main = '#EEEEFC'
      const features = '#A5A5F0'
      const font = '#fff'
      const fontInverted = '#000'
      const background = '#fff'
      const popular = '#7474E7
      const checkMark = '#89ce94'
    
      const handleClick = (e) => {
        console.log(e)
      }
    
      return (
        <>
          <PricingTableComponent
            plans={plans}
            color={{
              main,
              features,
              font,
              fontInverted,
              background,
              popular,
              checkMark
            }}
            handleClick={handleClick}
          />
        </>
      )
    }

    Props

    All these props are passed as defaults and can be overriden any time.

    Name Type Unit Description Default
    plans array N/A An array with the desired plans to include
    color object N/A An object with all the colors
    These are the colors passed in the color object to customize the pricing table
    • main: main color
    • font: color of the font
    • fontInverted: color of the font to contrast popular background
    • background: color of the header background
    • popular: color of the best offer or the most popular
    • features: color of the features text
    • checkmark: color of the features icon

    Install

    npm i @aiherrera/react-pricing-table

    DownloadsWeekly Downloads

    9

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    276 kB

    Total Files

    9

    Last publish

    Collaborators

    • aiherrera