@manifoldco/manifold-plan-table
Advanced tools
Place the following HTML where you’d like the component to appear (this works in any JS framework, or even no framework!):
<manifold-init client-id="[my client ID]"></manifold-init>
<manifold-plan-table product-id="[my product ID]" client-id="[my client ID]"></manifold-plan-table>
Note that the <manifold-init> component is required only once per page for
all Manifold Components (along with its JS). If you have that installed already, you may skip that
here and in the following steps.
Place the following at the very beginning of the <body> tag:
<script async type="module" src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.esm.js" ></script>
<script nomodule src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.js" ></script>
<script async type="module" src="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.esm.js" ></script>
<script nomodule src="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table.js" ></script>
Place this component’s CSS in your <head> tag (optional if you want to write your own styles):
<link rel="stylesheet" href="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.css" />
Alternately, if you build your site with npm using webpack, create-react-app, etc., run:
npm install @manifoldco/manifold-init @manifoldco/manifold-plan-table
And add the following code to your application, ideally to your entry file so it’s loaded as early as possible:
import('@manifoldco/manifold-init/loader').then(({ defineCustomElements }) =>
defineCustomElements(window)
);
import('@manifoldco/manifold-plan-table/loader').then(({ defineCustomElements }) =>
defineCustomElements(window)
);
Also if using CSS from npm, import the file in a way that works for your setup (for example, webpack):
import '@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.css';
This libary is built using Stencil. For more information about integrating with your site, please refer to the latest framework docs.
Options are passed to the component in the form of HTML Attributes:
| Name | Required | Description | Example |
|---|---|---|---|
product-id | Y | Your Product’s identifier | <manifold-plan-table product-id="234qkjvrptpy3thna4qttwt7m2nf6"> |
client-id | Y | Your Account identifier (this helps us associate analytics to your account) | <manifold-plan-table client-id="284ablb7scfm8oxwz9wrxpt2q0jii"> |
base-url | The URL the buttons link to (plan ID & user selection will be appended to the end of the URL in a query string) | <manifold-plan-table base-url="/checkout"> | |
cta-text | Change the ”Getting Started” default text. | <manifold-plan-table cta-text="Buy Now!"> | |
version | The version of your product (omit for latest published product). Use version="latest" for the latest draft. | <manifold-plan-table version="1"> |
This component emits [Custom JavaScript Events][custom-events] at key interaction points.
To begin listening for events, add a listener like so (you’ll want to make sure that this component exists in the DOM):
// your custom listener function
function myFunc(evt) {
console.log(evt);
}
document.querySelector('manifold-plan-table').addEventListener('ctaClick', myFunc); // do something on CTA clicks
document.querySelector('manifold-plan-table').addEventListener('init', myFunc); // do something on initial load
document.querySelector('manifold-plan-table').addEventListener('update', myFunc); // do something on updates
| Event Name | Trigger | Returns |
|---|---|---|
ctaClick | Fires when a user clicks the CTA | planID, planDisplayName, userSelection |
init | Fires once when the component has loaded (broadcasts default options for all plans) | defaultSelections |
update | Fires when a user selects a feature option (if you don’t have user-selectable features, you probably don’t need this) | planID, planDisplayName, userSelection |
This component works in all frameworks & environments, but when you first add the component in a JSX + TypeScript setup, you may see the following warning at first:
Property 'manifold-init' does not exist on type 'JSX.IntrinsicElements'.
To solve this, import the types this library ships with. Create a custom-elements.d.ts file
anywhere in your project that’s within tsconfig.json’s includes:
import { JSX as ManifoldInit } from '@manifoldco/manifold-init/loader';
import { JSX as ManifoldPlanTable } from '@manifoldco/manifold-plan-table/loader';
import { DetailedHTMLProps, HTMLAttributes } from 'react';
type StencilProps<T> = { [P in keyof T]?: Omit<T[P], 'ref'> };
type ReactProps<T> = { [P in keyof T]?: DetailedHTMLProps<HTMLAttributes<T[P]>, T[P]> };
type StencilToReact = ReactProps<HTMLElementTagNameMap> &
StencilProps<ManifoldInit.IntrinsicElements> &
StencilProps<ManifoldPlanTable.IntrinsicElements>;
// add additional Manifold Component types here if needed
declare global {
export namespace JSX {
interface IntrinsicElements extends StencilToReact {}
}
}
You’ll now get TypeScript errors if you mistype an attribute while still being able to use JSX features like refs:
<manifold-init fakeproperty="foo" />
// Property 'fakeproperty' does not exist on type …
FAQs
Stencil Component Starter
We found that @manifoldco/manifold-plan-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.
Security News
Ruby's creator Matz assumes control of RubyGems and Bundler repositories while former maintainers agree to step back and transfer all rights to end the dispute.
Research
/Security News
Socket researchers found 10 typosquatted npm packages that auto-run on install, show fake CAPTCHAs, fingerprint by IP, and deploy a credential stealer.