{"_id":"@aiherrera/react-pricing-table","_rev":"2-0749abd1a9edfadb1816b88e0067b017","name":"@aiherrera/react-pricing-table","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aiherrera/react-pricing-table","version":"1.0.0","description":"A simple & easy to use pricing table","license":"MIT","author":{"name":"Alain Iglesias","email":"info@aiherrera.com","url":"https://www.aiherrera.com"},"repository":{"type":"git","url":"git+https://github.com/aiherrera/react-pricing-table.git"},"keywords":["react","pricing","pricing-table","component"],"module":"build/index.esm.js","types":"build/index.d.ts","main":"index.js","scripts":{"build":"rollup -c","test":"jest","test:watch":"jest --watch","storybook":"start-storybook -p 6006","storybook:build":"build-storybook","prepublish":"npm run build"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@babel/core":"^7.12.10","@rollup/plugin-commonjs":"^17.0.0","@rollup/plugin-node-resolve":"^11.0.1","@storybook/addon-controls":"^6.1.20","@storybook/addon-essentials":"^6.1.20","@storybook/addon-knobs":"^6.1.21","@storybook/addon-links":"^6.1.20","@storybook/addon-storysource":"^6.1.21","@storybook/react":"^6.1.20","@testing-library/jest-dom":"^5.11.9","@testing-library/react":"^11.2.3","@types/jest":"^24.0.24","@types/react":"^16.9.12","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.7","babel-loader":"^8.1.0","babel-preset-react-app":"^10.0.0","identity-obj-proxy":"^3.0.0","jest":"^26.6.3","node-sass":"^5.0.0","react":"^16.13.1","react-dom":"^16.13.1","react-icons":"^4.2.0","rollup":"^2.36.1","rollup-plugin-copy":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^3.1.2","rollup-plugin-typescript2":"^0.29.0","sass-loader":"^10.1.1","styled-components":"^5.2.1","ts-jest":"^26.4.4","typescript":"^4.1.3"},"gitHead":"f818920e6609d87e3f865b94cc3515f090d5ebc2","bugs":{"url":"https://github.com/aiherrera/react-pricing-table/issues"},"homepage":"https://github.com/aiherrera/react-pricing-table#readme","_id":"@aiherrera/react-pricing-table@1.0.0","_nodeVersion":"14.6.0","_npmVersion":"7.6.0","dist":{"integrity":"sha512-El0WXpMoQyPijjNevWbYl/bBNQWc8/2kwD+Lszkb7yvjZS4AbMKa/PsxOUQ2dJmlWdnpqcHsNQf2ZLCMxBsG/A==","shasum":"40dcb6ff7d926328d81f628dc41069ef1c2941fd","tarball":"https://registry.npmjs.org/@aiherrera/react-pricing-table/-/react-pricing-table-1.0.0.tgz","fileCount":9,"unpackedSize":273197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRaRkCRA9TVsSAnZWagAAIQAP/2A8LXu4X5KdMQpxuzpt\no8CJIkPniFEOlt/dHk+AfjfIK5SPVk7BQ5EPemqyhPUA6kmrViisDSQN9BLd\n6vfxiWqx+p576su6oBUV70hJybHvKVTmOMkS3peQqJYzn0EYgWJuv5Eik1U/\n6flxK2Gm7uuSOv1bf82QqnCLhXUDjYRzQr5FuYVei6qVmjyX8EQTnIQbRWE8\nQ4HFmNqO6+4N37+CeY8g/8qhQKUzC+GXcjaiWFAzXSG99N+2Ud98Jx52qrKl\nTEfcMbUa7JCY4yViEu8I5dGZ3xIvRsKpfW6OehqoiZJcLJ4TsZqxOkbuvA/J\nhpa1TR2+508qzWm9Xa5N+rqvwIsoD8Rv9tGFzYa2inpk/HQsOJgF+puQCv59\nCl26TbDbQU5CzTs3QtjWJ/e/iTwfxry5PygYlPO2ZleARPbORPwpQD4Cv1LG\nebReslKZ0uOmZRDjEnLJkc9cicLE2bluf+QGrJ5Yt6SdMuZT7K4M0E10MNj8\no3iALWa16gYkqOxzApfmfs75JYTpgPsh/34gKfaDVq8/xv4BRUSWf/gGsoPm\no6iIfaK/TO6rLVsh8v5A5fchVPcsbNnzlxrl3DOFEN1qGPK4ltIJUm80KARc\nrbpLj6LRriBGGjPajnRcexpuFck9s9q0OMuWMmvXG+TcBAL3vpK2sDJ9Wt2t\nwa0O\r\n=XfZi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChJ+4eOV9yu97wA9NXRSpHw5qtob/een0ubNed2nFBXQIgEb+54gRo4mTvbTzsdpylH2eTU2FQoo5fepLbHwItrZQ="}]},"_npmUser":{"name":"aiherrera","email":"info@aiherrera.com"},"directories":{},"maintainers":[{"name":"aiherrera","email":"info@aiherrera.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-pricing-table_1.0.0_1615176804043_0.6830123713147545"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aiherrera/react-pricing-table","version":"1.0.1","description":"A simple & easy to use pricing table","license":"MIT","author":{"name":"Alain Iglesias","email":"info@aiherrera.com","url":"https://www.aiherrera.com"},"repository":{"type":"git","url":"git+https://github.com/aiherrera/react-pricing-table.git"},"keywords":["react","pricing","pricing-table","component"],"module":"build/index.esm.js","types":"build/index.d.ts","main":"index.js","scripts":{"build":"rollup -c","test":"jest","test:watch":"jest --watch","storybook":"start-storybook -p 6006","storybook:build":"build-storybook","prepublish":"npm run build"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@babel/core":"^7.12.10","@rollup/plugin-commonjs":"^17.0.0","@rollup/plugin-node-resolve":"^11.0.1","@storybook/addon-controls":"^6.1.20","@storybook/addon-essentials":"^6.1.20","@storybook/addon-knobs":"^6.1.21","@storybook/addon-links":"^6.1.20","@storybook/addon-storysource":"^6.1.21","@storybook/react":"^6.1.20","@testing-library/jest-dom":"^5.11.9","@testing-library/react":"^11.2.3","@types/jest":"^24.0.24","@types/react":"^16.9.12","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.7","babel-loader":"^8.1.0","babel-preset-react-app":"^10.0.0","identity-obj-proxy":"^3.0.0","jest":"^26.6.3","node-sass":"^5.0.0","react":"^16.13.1","react-dom":"^16.13.1","react-icons":"^4.2.0","rollup":"^2.36.1","rollup-plugin-copy":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^3.1.2","rollup-plugin-typescript2":"^0.29.0","sass-loader":"^10.1.1","styled-components":"^5.2.1","ts-jest":"^26.4.4","typescript":"^4.1.3"},"gitHead":"d4bca027804dec706031cc7dac10c1fbe7c90c13","bugs":{"url":"https://github.com/aiherrera/react-pricing-table/issues"},"homepage":"https://github.com/aiherrera/react-pricing-table#readme","_id":"@aiherrera/react-pricing-table@1.0.1","_nodeVersion":"14.6.0","_npmVersion":"7.6.0","dist":{"integrity":"sha512-dbnyXX6bg7VKOdyC4fD4Zw08K/15o2M5XHhgb5U4FLmtHExCgEtHpYDwQY0M+eCpsKyMTEocov48FVpAeltglA==","shasum":"f79cda20a328ddcb73edd118ed8c3c67445481d4","tarball":"https://registry.npmjs.org/@aiherrera/react-pricing-table/-/react-pricing-table-1.0.1.tgz","fileCount":9,"unpackedSize":276386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRcFgCRA9TVsSAnZWagAAjbkQAIDlAp+DSm9t7tNvlNC7\n8XpFOHNSfjbCfucgB2L4BI5UV/o8utl0Zf6qpWpzH9jaUTzaEQYCAYdugf8Z\nZXT9YKsn9WKdDpWuy65tkmucsB1/Dv4NcSqSz7ib5hIzzt/iP/XJ97XaV+E/\nkUb8YCUVk70FZ0UkQr08mPquX6wW3+dB4qbp/zSO9KB19gEf9z9BRN+Qlq3r\n7lDCmwIx79ZQ2++uhQ9GGBlbYFOH48Nt26xPTxzxJsHCKGL1rXS5brtJ/48D\nwBaXG2bPCJry4E6OS5sI9pSgpTzGupEpzhkP2ANmmxuOae17LAY9Ofss1r97\nHNZ3XR7ZgnlgVmxmkc+paKxe+yBlc/f5e/k6Y2QR4KAXipRb7qabUnN4QkJS\nGilgVBdnNsH2vXC6ICtTUwYzRg65pOEu7MK2gAw/VOppNwIL/+dFqnp2gbO5\n338fxZXEmluvOzBziiGC9VK4qnv4ySRV4+BAvr1z0s6RZpKu2eKdPZ39zcRv\np2w+bWQ4OTwGN2LPY1UzNX/rPq6ucovlE4Cno2O8mkqUyKnEil9/3Jllk7Ww\notUtLUXQeXhIaw8DYmADT39lmVBPZkgZ8a6GooTew6GP+i3rglIPQmdV4qW+\n/0zNr2IfhR7rUzABS4qFME+y9eLq6psKeqSSfAhLjp34MqQwbFgNLLUIaSqD\nNGwK\r\n=u+ly\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWAN2WKX95XP5ZlUryb2X1Fz8taFPhdvLxE1+y/3h+aAiEAzaJtuZEYAZceQVgqOPqs02LRAp2L7pEqvWNjwvHG7Do="}]},"_npmUser":{"name":"aiherrera","email":"info@aiherrera.com"},"directories":{},"maintainers":[{"name":"aiherrera","email":"info@aiherrera.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-pricing-table_1.0.1_1615184223488_0.5465304520954337"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-08T04:13:24.005Z","1.0.0":"2021-03-08T04:13:24.213Z","modified":"2022-04-04T12:17:53.427Z","1.0.1":"2021-03-08T06:17:03.683Z"},"maintainers":[{"name":"aiherrera","email":"info@aiherrera.com"}],"description":"A simple & easy to use pricing table","homepage":"https://github.com/aiherrera/react-pricing-table#readme","keywords":["react","pricing","pricing-table","component"],"repository":{"type":"git","url":"git+https://github.com/aiherrera/react-pricing-table.git"},"author":{"name":"Alain Iglesias","email":"info@aiherrera.com","url":"https://www.aiherrera.com"},"bugs":{"url":"https://github.com/aiherrera/react-pricing-table/issues"},"license":"MIT","readme":"# Pricing table for React\n\nA simple and easy to use react pricing table\n\n## Installation\n\nRequires **React 16 or later**\n\n`npm i --save @aiherrera/react-pricing-table`\n\n`# or`\n\n`yarn add @aiherrera/react-pricing-table`\n\n## Demo\n\nYou can check all the configurations in this [Ai-CoderLab](https://coderlab.aiherrera.com/?path=/story/playground-react-components--pricing-table)\n\n## Usage\n\n`{ PricingTable }`\n\n```\n// ES5 syntax\nconst PricingTable = require('@aiherrera/react-pricing-table')\n\n// ES6 syntax\nimport PricingTable from '@aiherrera/react-pricing-table'\n\n```\n\n### Full example\n\n```typescript\nimport React from 'react'\nimport { IoCheckmark } from 'react-icons/io5'\n\nimport PricingTable from '@aiherrera/react-pricing-table'\n\nconst App = () => {\n\n  const plans = [\n    {\n      id: 'basic',\n      circle: 'B',\n      title: 'Basic',\n      subtitle: 'Best for personal websites',\n      price: 'MX$8,000',\n      discount: 'MX$6,500',\n      buttonText: 'Select plan',\n      popular: false,\n      features: (\n        <ul>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n        </ul>\n      )\n    },\n    {\n      id: 'standard',\n      circle: 'S',\n      title: 'Standard',\n      subtitle: 'Optimized for startups',\n      price: 'MX$12,000',\n      buttonText: 'Select plan',\n      popular: true,\n      features: (\n        <ul>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n        </ul>\n      )\n    },\n    {\n      id: 'premium',\n      circle: 'E',\n      title: 'Premium',\n      subtitle: 'Enterprise class website',\n      price: 'MX15,000',\n      buttonText: 'Select plan',\n      popular: false,\n      features: (\n        <ul>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n          <li>\n            <IoCheckmark />\n            <span>Lorem Ipsum</span>\n          </li>\n        </ul>\n      )\n    }\n  ]\n\n  const main = '#EEEEFC'\n  const features = '#A5A5F0'\n  const font = '#fff'\n  const fontInverted = '#000'\n  const background = '#fff'\n  const popular = '#7474E7\n  const checkMark = '#89ce94'\n\n  const handleClick = (e) => {\n    console.log(e)\n  }\n\n  return (\n    <>\n      <PricingTableComponent\n        plans={plans}\n        color={{\n          main,\n          features,\n          font,\n          fontInverted,\n          background,\n          popular,\n          checkMark\n        }}\n        handleClick={handleClick}\n      />\n    </>\n  )\n}\n```\n\n## Props\n\nAll these props are passed as defaults and can be overriden any time.\n\n| Name  | Type   | Unit | Description                                | Default |\n| ----- | ------ | ---- | ------------------------------------------ | ------- |\n| plans | array  | N/A  | An array with the desired plans to include |         |\n| color | object | N/A  | An object with all the colors <br>         |         |\n\n##### These are the colors passed in the color object to customize the pricing table\n\n<ul>\n  <li>main: main color</li>\n  <li>font: color of the font</li>\n  <li>fontInverted: color of the font to contrast popular background</li>\n  <li>background: color of the header background</li>\n  <li>popular: color of the best offer or the most popular</li>\n  <li>features: color of the features text</li>\n  <li>checkmark: color of the features icon</li>\n</ul>\n","readmeFilename":"README.md"}