Features

Usage

Markup

<hanko-profile></hanko-profile>

Attributes

NameDescription
langUsed to specify the language of the content within the element

Adding <hanko-profile> component

Examples showcasing how to add <hanko-profile> component in different full stack and frontend frameworks.

Full Stack

  • Nextjs (App directory)

  • Nextjs (Pages directory)

  • Nuxt

  • SvelteKit

  • Fresh

components/HankoProfile.jsx
"use client"

import { useEffect } from "react";
import { register } from "@teamhanko/hanko-elements";

const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;

export default function HankoProfile() {
  useEffect(() => {
    register(hankoApi).catch((error) => {
      // handle error
    });
  }, []);

return <hanko-profile />;
}

Frontend

  • Create React App

  • React with Vite

  • Vue

  • Svelte

  • JavaScript

components/HankoProfile.tsx
import { useEffect } from "react";
import { register } from "@teamhanko/hanko-elements";

const hankoApi = process.env.REACT_APP_HANKO_API_URL;

export default function HankoProfile() {
  useEffect(() => {
    register(hankoApi).catch((error) => {
      // handle error
    });
  }, []);

  return <hanko-profile />;
}

You should see an interface similar to this 👇

profile-page

For more detailed instructions on integrating <hanko-profile> component with your favorite frameworks, navigate to quickstart guides.