Breaking News

“Breaking” banner with rotating headlines. Pro · Content and social › Feed and news

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add breaking-news

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { BreakingNews } from 'valyro-ui-pro';

Prop	Type	Default
`items` *	`BreakingNewsItem[]`		Headlines to show; several rotate one at a time.
`interval`	`number`	`6000`	Milliseconds each headline stays before the next (default 6000; 0 turns rotation off). Rotation pauses on hover and focus, and is off for readers who prefer reduced motion.
`variant`	`'urgent' \| 'subtle'`	`'urgent'`	`urgent`: a solid danger bar (default); `subtle`: a quiet strip with a coloured tag.
`onDismiss`	`() => void`		Shows a close button; called when the reader dismisses the bar.
`timeZone`	`string`		IANA time zone of the dates shown, e.g. "Europe/Moscow" (default: the ThemeProvider's, then the reader's). Set it, here or on the provider, when rendering on the server, so the server and the browser print the same time.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<BreakingNewsLabels>`		Overrides for the built-in English text; keys left out keep their defaults.