Skip to main contentSkip to site searchSkip to component search
Honeycomb

connection-stop

Props

Prop nameTypeDefaultDescription
extraClassesstring | undefined

Injection in className.

stationReactNodeRequired

The station name.

timestring | ConnectionTimeComp | undefined

The time or a `ConnectionTime` component. See ConnectionTime

currentboolean | undefined

Sets the current stop and enables live mode.

InlineIconIconComponent | undefined

Override the current stop marker.

innerRefRef<HTMLLIElement> | undefined

React ref forwarded to the "list" element.

The ConnectionStop component renders a connection item with station and time.

In the simplest connection example you can pass plain strings as station and time props and the component will create connection station and connection time components accordingly.

import { Connection, ConnectionStop } from '@flixbus/honeycomb-react';

<Connection>
  <ConnectionStop extraClasses="alex" station="Berlin Alexanderplatz" time="08:00"></ConnectionStop>
  <ConnectionStop extraClasses="munich" station="München Fröttmanning" time="13:00"></ConnectionStop>
</Connection>

Customizing the stop times

If you wish to have more control over the props passed to each of the time elements, you can use the ConnectionTime component. Also the station prop accepts React nodes.

This allows you to fine grain all of the options, and also provide extra props that might be useful for proper accessibility in more complex connections, such as labels in live mode.

To show one time on top of the other, use the time and secondTime props, the second time being the old one.

To show them side by side simply pass them next to each other, as suc:

import { Connection, ConnectionStop, ConnectionTime, Time } from '@flixbus/honeycomb-react';

<Connection>
  <ConnectionStop extraClasses="hamburg" station="Hamburg ZOB" time="22:00" />
  <ConnectionStop
    station={<span className="hannover">Hannover</span>}
    time={
      <ConnectionTime
        time={<Time Elem="ins" label="New time of arrival:" dateTime="2000-08-01T01:00" className="the-new-time"><strong>01:00</strong></Time>}
        secondTime={<Time Elem="del" label="Old time of arrival:" dateTime="2000-08-01T00:30" className="the-old-time">00:30</Time>}
      />
    }
  />
    <ConnectionStop
      station={<span className="nuremberg">Nuremberg</span>}
      time={
        <ConnectionTime
          time={(
            <>
              <Time Elem="del" label="Old time of arrival:" dateTime="2000-08-01T05:30" className="the-old-time">05:30</Time>
              <Time Elem="ins" label="New time of arrival:" dateTime="2000-08-01T06:00" className="the-new-time"><strong>06:00</strong></Time>
            </>
          )}
        />
    }
  />
  <ConnectionStop
    station={<strong className="munich">München ZOB</strong>}
    time={<ConnectionTime time={<Time dateTime="2000-08-01T07:00"><strong>07:00</strong></Time>} />}
  />
</Connection>

Enabling connection live mode

The connection live mode is enabled once you identify a ConnectionStop as the current item.

You can change the default icon by passing the one of your choosing via the InlineIcon prop.

import { Connection, ConnectionStop, ConnectionTime, Time } from '@flixbus/honeycomb-react';
import { IconTrainSolid } from '@flixbus/honeycomb-icons-react';

<>
  <Connection title="Your bus trip in real time" appearance="warning">
    <ConnectionStop station="Berlin Alexanderplatz" time="10:00" />
    <ConnectionStop station="Berlin Flughafen BER (T1/2)" time="10:15" />
    <ConnectionStop current station="Dresden Neustadt, Ausstieg" time="12:15" />
    <ConnectionStop station="Dresden Hbf" time="12:30" />
  </Connection>

  <Connection title="Your train trip in real time" appearance="success">
    <ConnectionStop station="Dresden Hbf" time="12:30" />
    <ConnectionStop station="Dresden Neustadt, Ausstieg" time="12:15" />
    <ConnectionStop current InlineIcon={IconTrainSolid} station="Berlin Flughafen BER (T1/2)" time="10:15" />
    <ConnectionStop station="Berlin Alexanderplatz" time="10:00" />
  </Connection>
</>