Molecule.dev

@molecule/app-home-page-react

Feature · home-page · App (browser) · v1.0.2 · Apache-2.0

Authenticated home page rendering a personalized greeting (h2 with user name or fallback). Reads auth + i18n; styled via ClassMap.

npm install @molecule/app-home-page-react

npm · Source on GitHub

How it works

@molecule/app-home-page-react is a ready-made home-page feature for the app (browser) side. It composes the core interfaces it needs, so it works with whichever providers your app has bonded.

import { Home } from '@molecule/app-home-page-react'

;<Route path="/" element={<Home />} />

Works with: @molecule/app-auth, @molecule/app-react, @molecule/app-ui

Reference

<Home /> — authenticated home page with personalized greeting.

Renders a single H2 of the form {home.greeting}{name|email|home.world}! using the universal common-locale bond. Used as the default post-login landing page when the app has no app-specific dashboard.

Replaces the byte-identical pages/Home.tsx shipped by 19 of the 38 flagship apps that have an authenticated Home route. Apps that override home.greeting per-app (e.g. note-taking's "Hello, {{name}}.") get the override automatically — the page reads the resolved translation, which spreads the bond default beneath any per-app override.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { Home } from '@molecule/app-home-page-react'

;<Route path="/" element={<Home />} />

Type

feature

Installation

npm install @molecule/app-home-page-react @molecule/app-auth @molecule/app-react @molecule/app-ui react
npm install -D @types/react

API

Functions

Home()

Authenticated home page — a personalized greeting headline.

Renders a single H2 of the form: {home.greeting}{user.name || user.email || home.world}!

home.greeting and home.world both come from the universal common-locale bond (@molecule/app-locales-common), so the page is fully translated out of the box. Apps can override home.greeting per-app (e.g. note-taking's "Hello, {{name}}.") simply by including the key in their own locale ui.ts.

function Home(): JSX.Element

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-auth ^1.0.1
  • @molecule/app-react ^1.0.1
  • @molecule/app-ui ^1.0.1
  • react ^18.0.0 || ^19.0.0

Runtime Dependencies

  • @molecule/app-auth

  • @molecule/app-react

  • @molecule/app-ui

  • react

  • Calls useAuth() and useTranslation() — both THROW unless the tree is wrapped in @molecule/app-react's AuthProvider and I18nProvider (scaffolded apps do this in App.tsx).

  • home.greeting / home.world have NO inline English fallback: they resolve from @molecule/app-locales-common, which setupI18nDefault() (from @molecule/app-i18n-default-react) merges automatically. A custom i18n setup must register the common bond or the raw keys render on screen.