Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aiherrera/react-pricing-table
https://github.com/aiherrera/react-pricing-table
Last synced: about 14 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/aiherrera/react-pricing-table
- Owner: aiherrera
- License: mit
- Created: 2021-03-04T18:01:12.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-03-08T06:20:47.000Z (over 3 years ago)
- Last Synced: 2024-11-10T02:42:58.650Z (10 days ago)
- Language: JavaScript
- Size: 721 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://coderlab.aiherrera.com/?path=/story/playground-react-components--pricing-table)
## Usage
`{ PricingTable }`
```
// ES5 syntax
const PricingTable = require('@aiherrera/react-pricing-table')
// ES6 syntax
import PricingTable from '@aiherrera/react-pricing-table'
```
### Full example
```typescript
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: (
-
Lorem Ipsum
-
Lorem Ipsum
-
Lorem Ipsum
-
Lorem Ipsum
-
Lorem Ipsum
)
},
{
id: 'standard',
circle: 'S',
title: 'Standard',
subtitle: 'Optimized for startups',
price: 'MX$12,000',
buttonText: 'Select plan',
popular: true,
features: (
-
Lorem Ipsum
-
Lorem Ipsum
-
Lorem Ipsum
-
Lorem Ipsum
-
Lorem Ipsum
)
},
{
id: 'premium',
circle: 'E',
title: 'Premium',
subtitle: 'Enterprise class website',
price: 'MX15,000',
buttonText: 'Select plan',
popular: false,
features: (
-
Lorem Ipsum
-
Lorem Ipsum
-
Lorem Ipsum
-
Lorem Ipsum
-
Lorem Ipsum
)
}
]
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 (
<>
>
)
}
```
## 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