@manifoldco/component-plan-matrix
Getting Started
Place the following HTML where you’d like the component to appear (this works in any JS framework, or even no framework!):
<manifold-plan-matrix></manifold-plan-matrix>This component also requires our manifold-init component to be present on the page with your client ID added.
<manifold-init client-id="your client ID"></manifold-init>Option 1: Manifold CDN
Next place the following at the very beginning of the <body> tag:
<!-- modern browsers -->
<script
type="module"
src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.esm.js"
></script>
<script type="module">
import(
'https://js.cdn.manifold.co/@manifoldco/component-plan-matrix/loader/index.mjs'
).then(({ defineCustomElements }) => defineCustomElements(window));
</script>
<!-- legacy browsers -->
<script
nomodule
src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.js"
></script>
<script
nomodule
src="https://js.cdn.manifold.co/@manifoldco/component-plan-matrix/dist/manifold-plan-matrix.js"
></script>Option 2: npm
Alternately, if you build your site with npm using webpack, create-react-app, etc., run:
npm install @manifoldco/component-plan-matrix
npm install @manifoldco/manifold-initAnd add the following code to your application, ideally to your entry file so it’s loadded as early as possible:
import('@manifoldco/component-plan-matrix/loader').then(({ defineCustomElements }) =>
defineCustomElements(window)
);
import('@manifoldco/manifold-init/loader').then(({ defineCustomElements }) =>
defineCustomElements(window)
);This libary is built using Stencil. For more information about integrating with your site, please refer to the latest framework docs.
Using in TypeScript + JSX
This Web Component works in all frameworks & environments, but if you’re using within a React & TypeScript setup, you’ll also need the following config.
Create a custom-elements.d.ts file anywhere in your project that’s within tsconfig.json’s
includes property:
import { Components, JSX as LocalJSX } from '@manifoldco/component-plan-matrix/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<T = LocalJSX.IntrinsicElements, U = HTMLElementTagNameMap> = StencilProps<T> &
ReactProps<U>;
declare global {
export namespace JSX {
interface IntrinsicElements extends StencilToReact {}
}
}