diff --git a/README.md b/README.md
index a606600..d6475ca 100644
--- a/README.md
+++ b/README.md
@@ -12,25 +12,25 @@ or even no framework!):
```
-Note that the [``][manifold-init] component is required **once per page** for any
-other Manifold Web Components you embed.
+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.
### Option 1: Manifold CDN
Place the following at the very beginning of the `` tag:
+
```html
-
-
-
-
+
```
Place this component’s CSS in your `` tag (optional if you want to write your own styles):
+
```html
```
@@ -47,11 +47,16 @@ And add the following code to your application, ideally to your entry file so it
as possible:
```js
-import('@manifoldco/manifold-init/loader').then(({ defineCustomElements }) => defineCustomElements(window));
-import('@manifoldco/manifold-plan-table/loader').then(({ defineCustomElements }) => defineCustomElements(window));
+import('@manifoldco/manifold-init/loader').then(({ defineCustomElements }) =>
+ defineCustomElements(window)
+);
+import('@manifoldco/manifold-plan-table/loader').then(({ defineCustomElements }) =>
+ defineCustomElements(window)
+);
```
-Also import the CSS file in a way that works for your setup (for example, webpack):
+Also if using CSS from npm, import the file in a way that works for your setup (for example,
+webpack):
```js
import '@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.css';
@@ -64,35 +69,37 @@ site, please refer to the latest [framework docs][stencil-framework].
Options are passed to the component in the form of HTML Attributes:
-| Name | Required | Description | Example |
-| :----------- | :------: | :-------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ |
+| Name | Required | Description | Example |
+| :----------- | :------: | :-------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------- |
| `product-id` | Y | Your Product’s identifier | `` |
| `client-id` | Y | Your Account identifier (this helps us associate analytics to your account) | `` |
| `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) | `` |
| `cta-text` | | Change the ”Getting Started” default text. | `` |
-## Using in TypeScript + JSX
+## 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.
+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'.
+```
-Create a `custom-elements.d.ts` file anywhere in your project that’s within `tsconfig.json`’s
-[includes][tsconfig-includes] property:
+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][tsconfig-includes]:
```ts
-import { Components, JSX as LocalJSX } from '@manifoldco/manifold-plan-table/loader';
+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 = {
- [P in keyof T]?: Omit;
-};
+type StencilProps = { [P in keyof T]?: Omit };
+type ReactProps = { [P in keyof T]?: DetailedHTMLProps, T[P]> };
-type ReactProps = {
- [P in keyof T]?: DetailedHTMLProps, T[P]>;
-};
-
-type StencilToReact = StencilProps &
- ReactProps;
+type StencilToReact = ReactProps &
+ StencilProps &
+ StencilProps;
+// add additional Manifold Component types here if needed
declare global {
export namespace JSX {
@@ -101,6 +108,14 @@ declare global {
}
```
+You’ll now get TypeScript errors if you mistype an attribute while still being able to use JSX
+features like refs:
+
+```
+
+// Property 'fakeproperty' does not exist on type …
+```
+
[manifold-init]: https://github.com/manifoldco/manifold-init
[stencil-framework]: https://stenciljs.com/docs/overview
[stencil]: https://stenciljs.com/docs/introduction