@vervstack/chures

React components and hooks for Telegram OAuth login and toast notifications.

• TelegramAuth / useTelegramLogin — wire up Telegram Login with a single component or a custom render prop
• TelegramSignInButton — standalone Telegram-branded button
• Toaster / useToaster — animated toast notifications with auto-dismiss

CSS is injected automatically — no stylesheet import needed.

Install

npm install @vervstack/chures
# peer deps
npm install framer-motion zustand

Telegram Auth

Drop-in button

import { TelegramAuth } from "@vervstack/chures";

<TelegramAuth
  botId="YOUR_BOT_ID"
  onSuccess={(data) => console.log(data.id_token)}
/>

Custom UI (render prop)

import { TelegramAuth } from "@vervstack/chures";

<TelegramAuth botId="YOUR_BOT_ID" onSuccess={handleAuth}>
  {({ login, isReady }) => (
    <button onClick={login} disabled={!isReady}>
      Sign in with Telegram
    </button>
  )}
</TelegramAuth>

Hook only

import { useTelegramLogin } from "@vervstack/chures";

const { login, isReady } = useTelegramLogin({
  botId: "YOUR_BOT_ID",
  onSuccess: (data) => console.log(data.id_token),
});

TelegramAuth props

| Prop | Type | Default | Description | |---|---|---|---| | botId | string | — | Your Telegram bot ID | | onSuccess | (data: TelegramAuthData) => void | — | Called with auth data on success | | lang | "en" \| "ru" | "en" | Button label language | | title | string | — | Custom button label | | redirectUri | string | window.location.origin | OAuth redirect URI | | requestAccess | string | "write" | Telegram access scope | | children | (props) => ReactNode | — | Render prop for custom UI | | className | string | — | Extra class on the button |

TelegramSignInButton props

| Prop | Type | Default | Description | |---|---|---|---| | onClick | () => void | — | Click handler | | disabled | boolean | — | Disables the button | | lang | "en" \| "ru" | "en" | Label language | | title / label | string | — | Override button text | | fullSize | boolean | — | Stretch to full width | | className | string | — | Extra CSS class |

Toasts

Mount <Toaster /> once at the root of your app, then call useToaster anywhere.

import { Toaster, useToaster } from "@vervstack/chures";

// in your root layout
<Toaster />

// anywhere in your app
const { bake } = useToaster();

bake({ title: "Saved", description: "Your changes were saved.", level: "Info" });
bake({ title: "Error", description: "Something went wrong.", level: "Error", isDismissable: true });

Toasts auto-dismiss after 5 seconds. Set isDismissable: true to show a close button.

Toast fields

| Field | Type | Default | Description | |---|---|---|---| | title | string | — | Toast heading (also used as unique key) | | description | string | — | Body text | | level | "Info" \| "Warn" \| "Error" | "Info" | Visual severity | | isDismissable | boolean | false | Show manual dismiss button |

CSS theming

Override these CSS custom properties to match your design:

| Variable | Default | Meaning | |---|---|---| | --ta-accent | #229ED9 | Info border color | | --ta-error | #ef4444 | Error border + title color | | --ta-warn | #f59e0b | Warning border + title color | | --ta-fg | #ffffff | Title text color | | --ta-fg-muted | #9ca3af | Description text color | | --ta-font-sm | 0.875rem | Title font size | | --ta-font-xs | 0.75rem | Description font size |

License

MIT