From 8ce8f124ba1543ae188dce94e0d030e487a3096a Mon Sep 17 00:00:00 2001
From: Ryan Felix <ryan@userfront.com>
Date: Tue, 31 Oct 2023 17:57:24 -0400
Subject: [PATCH] Add component and props list

---
 README.md | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index b59e7d4..169c823 100644
--- a/README.md
+++ b/README.md
@@ -84,9 +84,37 @@ Userfront.init("myTenantId");
 </body>
 ```
 
+## Components
+
+| React                   | Vue & Web Components                          |
+| ----------------------- | --------------------------------------------- |
+| `<SignupForm />`        | `<signup-form></signup-form>`                 |
+| `<LoginForm />`         | `<login-form></login-form>`                   |
+| `<PasswordResetForm />` | `<password-reset-form></password-reset-form>` |
+| `<LogoutButton />`      | `<logout-button></logout-button>`             |
+
+Note: when using them in plain HTML, Web Components are not self-closing and must have the full closing tag.
+When using in Vue, they can be written in self-closing form: `<signup-form />`.
+
+The Vue components are `<kebab-case>` because they are Web Components under the hood, and Web Components are required to be in kebab-case.
+
+### Props
+
+In React, props are `camelCase`. In Vue and Web Components, props are `kebab-case`, as required by the Web Components standard.
+
+All props are optional.
+
+- `tenantId` / `tenant-id`: your tenant ID, from the Userfront dashboard. If you call `Userfront.init("yourTenantId")` before using the components, it's not necessary to provide this prop.
+- `compact`: if `true` and username/password is an allowed factor in your tenant's [authentication flow](https://userfront.com/dashboard/authentication), show a "Password" button. If `false`, show the username and password fields directly in the form's sign-on method selection view.
+  - Default: `false`
+- `redirect`: controls if and where the form should redirect **after** sign-on. If `false`, the form does not redirect. If set to a path, redirects to that path. If empty, redirects [as configured in your Userfront dashboard](https://userfront.com/dashboard/paths).
+  - Default: `undefined`
+- `redirectOnLoadIfLoggedIn` / `redirect-on-load-if-logged-in`: if `true` and the user is already logged in when they load the form, redirects per the `redirect` parameter. If `false`, do not redirect if the user is already logged in when they load the form.
+  - Default: `false`
+
 ## Development
 
-## Repo structure
+### Repo structure
 
 This repo holds several different libraries.
 
@@ -97,7 +125,7 @@ This repo holds several different libraries.
 
 The repo is configured as an npm workspace to enable sharing of libraries and dynamically linking the package to the dev app.
 
-## Development installation and setup
+### Development installation and setup
 
 1. Clone this repo.
 2. Install:
@@ -120,6 +148,6 @@ This will run the live dev servers for both the package and the site.
   - Find the link to the local Storybook server in the output.
   - Storybook should hot reload on changes to the package. Each UI state has its own component, so changes should show immediately and shouldn't require reloading the page.
 
-## Architecture
+### Architecture
 
 See the `README.md` in `packages/toolkit-react` for a more detailed overview of the toolkit's architecture.