@slashid/jump-page 0.0.26 → 0.0.27-package.0

package/README.md

@@ -1,68 +1,53 @@
-# /id - SDK Jump page
+# /id - SDK Verification page
 
-WIP jump page implementation for the SDK. SSG + client side rendering.
+This package implements the SlashID verification page as a React component.
+This allows self hosting the verification page as this component can be rendered in any React application.
 
-## Running the app via CLI
+## Installation
 
-This package comes with CLI support so you can run it locally:
+Use any package manager you prefer:
 
 ```bash
-npm install -g @slashid/jump-page
+$ npm install @slashid/jump-page
 ```
 
-### CLI docs
+## Usage
 
-```bash
-Usage: sid-jump-cli serve [options]
-
-Start the development server
+First import the default styles:
 
-Options:
-  -p, --port <number>   Port to use for the development server (default: 4321)
-  -a, --api-url <char>  SlashID API URL (default: "https://api.slashid.com")
-  -s, --sdk-url <char>  SlashID SDK URL (default: "https://cdn.slashid.com/sdk.html")
-  -h, --help            display help for command
+```jsx
+import "@slashid/jump-page/style.css"
 ```
 
-## Astro gotchas
+Then render the `Verification` component:
 
-### React hydration
-
-Astro renders a static site by default, meaning the even when using React components they won't hydrate out of the box - it is required to explicitly tell Astro which components should be hydrated by [creating an island](https://docs.astro.build/en/concepts/islands/#creating-an-island).
+```jsx
+import { Verification } from "@slashid/jump-page"
 
-Another gotcha is that when rendering multiple React components from an Astro component, it is not enough to create an island for the parent component, but for each of the children as well. Example:
+import "@slashid/jump-page/style.css"
 
-```jsx
-// Page.astro
----
-import { Parent, Child } from './components';
----
-
-<Parent client:load>
-    <Child client:load />
-</Parent>
+export function VerificationPage() {
+  return <Verification />
+}
 ```
 
-Notice how the `Child` component also needs the `client:load` attribute. Otherwise it would only be rendered when generating the site.
+## Configuration
 
-To prevent issues like these, encapsulate the whole client side app in a single parent component and create an island for it.
+By default, the `Verification` component uses the `production` environment. Other environments can be used by passing the `environment` prop with the following values: `production`, `testing`, `sandbox`.
 
-```jsx
-// app.tsx
-import { Parent, Child } from "./components";
+A custom environment can be used by specifying the API and SDK URLs:
+
+```ts
+import { Verification, type Environment } from "@slashid/jump-page"
+
+import "@slashid/jump-page/style.css"
 
 export function App() {
-  return (
-    <Parent>
-      <Child client:load />
-    </Parent>
-  );
+  const customEnvironment: Environment = { baseURL: config.baseURL, sdkURL: config.sdkURL }
+  return <Verification environment={environment} />
 }
+```
 
-// Page.astro
----
-import { App } from './app';
----
+## Customisation
 
-<App client:load />
-```
+Verification page can be customised using the SlashID Console.