Components
LivePulse
Unstable: a live or online mark, a dot whose ring grows and fades, always beside the words that say what is live. Import it from @nizivo/react/unstable/live-pulse.
Examples
Basic
A live session, and a sync under way: the words carry the meaning, the dot only draws the eye.
import type { JSX } from 'react';
import { LivePulse } from '@nizivo/react/unstable/live-pulse';
export function LivePulseExample(): JSX.Element {
return (
<div style={{ display: 'flex', gap: 24 }}>
<LivePulse>Live</LivePulse>
<LivePulse>Syncing</LivePulse>
</div>
);
}
Import
import { LivePulse } from '@nizivo/react/unstable/live-pulse';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/live-pulse.css';Static or interactive
Server. No client JavaScript. How to choose.
Use
The children are the words ("Live", "Syncing"), and they are required: the pulse alone says nothing. The ring repeats every 1.6 seconds; under Reduced motion only the dot shows.
Props
Server component Renders data-slot="live-pulse" with the class nz-live-pulse. Props: LivePulseProps. Source: src/unstable/live-pulse/live-pulse.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactElement | string | – | The words: "Live", "Syncing". Required: the pulse alone says nothing. |
render | RenderProp<Record<string, never>> | – | Must render a |
- Also takes every attribute of
<span>;childrenis redeclared above. (ComponentPropsWithRef<"span">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
LivePulsePropstypeimport type { LivePulseProps } from '@nizivo/react/unstable/live-pulse'The props of
LivePulse, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
live-pulse.nz-live-pulse | LivePulseroot (takes render) | none |
live-pulse-label.nz-live-pulse-label | LivePulseinner element (CSS only) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-live-pulse, .nz-live-pulse-dot, .nz-live-pulse-label.
Tokens this stylesheet reads (8)
--nz-bg-brand, --nz-duration-pulse, --nz-easing-standard, --nz-font-label-m, --nz-radius-full, --nz-space-0-5, --nz-space-2, --nz-text-primary
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
Link
Unstable: navigation in text, always underlined so it is never told by colour alone; external links open in a new tab, show an arrow and say so. Import it from @nizivo/react/unstable/link.
MediaPlayer
Unstable: the controls for a podcast, a tutorial or a product video, artwork, title, a scrubber and play, pause, back and forward. It holds no media: wire it to your audio or video. Import it from @nizivo/react/unstable/media-player.