@qonto/login-button

A customizable Web Component that provides a login button with consistent Qonto styling and behavior.

Installation

pnpm install @qonto/login-button

Release

The release process is automated using release-it.

pnpm release

For more information, please refer to the release how-to document.

Usage

Module

<!-- Import the web component -->
<script type="module">
  import "@qonto/login-button";
</script>

<!-- Use it in your HTML -->
<qonto-login-button href="https://app.qonto.com/signin" locale="en" />

React

pnpm install @lit/react

import React from "react";
import { createComponent } from "@lit/react";
import { QontoLoginButton as QontoLoginButtonWC } from "@qonto/login-button";

function App() {
  const QontoLoginButton = createComponent({
    tagName: "qonto-login-button",
    elementClass: QontoLoginButtonWC,
    react: React,
  });

  return (
    <QontoLoginButton
      href="https://app.qonto.com/signin"
      locale="en"
      onClick={() => console.log("clicked")}
    />
  );
}

export default App;

Properties

| Property | Type | Default | Description | | -------- | -------- | -------------------------------- | ------------------------------------------------- | | href | string | 'https://app.qonto.com/signin' | The URL to redirect to when the button is clicked | | locale | string | 'en' | The locale to use for the button |

Development

Setup

pnpm install

pnpm dev

Building

pnpm build

Testing

pnpm test

# Or run tests in watch mode
pnpm test:watch

Changelog

The changelog is automatically generated using release-it and conventional-changelog.

Contributing

Coming soon.

License

This project is licensed under the MIT License – see the LICENSE.md file for details.