Molecule.dev

← All @molecule/* packages · App templates

@molecule/app-section-divider-react

Feature · section-divider · App (browser) · v1.0.1 · Apache-2.0

Centered-label section divider ("OR", "Today") with flanking lines

npm install @molecule/app-section-divider-react

npm · Source on GitHub

How it works

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

import { SectionDivider } from '@molecule/app-section-divider-react'

<SectionDivider>OR</SectionDivider>

<SectionDivider align="start">Today</SectionDivider>

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

Reference

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.

Horizontal divider with optional centered label.

Exports <SectionDivider>.

Quick Start

import { SectionDivider } from '@molecule/app-section-divider-react'

<SectionDivider>OR</SectionDivider>

<SectionDivider align="start">Today</SectionDivider>

Type

feature

Installation

npm install @molecule/app-section-divider-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
npm install -D @types/react

API

Interfaces

SectionDividerProps

Props accepted by the {@link SectionDivider} component.

interface SectionDividerProps {
  /** Centered label text. */
  children?: ReactNode
  /** Where to align the label. Defaults to `'center'`. */
  align?: 'start' | 'center' | 'end'
  /** Extra classes. */
  className?: string
}

Functions

SectionDivider(props)

Horizontal divider with an optional centered label, common as "OR" between auth options, "Today" between feed days, "—" between sections.

function SectionDivider({ children, align = 'center', className }: SectionDividerProps): JSX.Element
  • props — Component props (see {@link SectionDividerProps}).

Injection Notes

Requirements

Peer dependencies:

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

Runtime Dependencies

  • @molecule/app-react

  • @molecule/app-ui

  • @molecule/app-ui-react

  • react

  • Requires a bonded ClassMap (setClassMap() at startup) — rendering throws otherwise. No i18n dependency (the label is your own ReactNode — translate it upstream).

  • align positions the label: 'center' (default) draws lines on both sides; 'start' / 'end' put the label at that edge with a single line filling the rest.

  • Lines use currentColor at 20% opacity, so they inherit the local text color in both light and dark themes.