@manifoldco/component-plan-matrix NPM

@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-init

And 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 {}
  }
}

@everything-registry/sub-chunk-577 @infinitebrahmanuniverse/nolb-_mani

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago