CountdownTimer

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The clock alone or with a draining ring. warnAt turns to the warning colour in the last seconds.

01:3001:30

LightDark

Copy code

import { CountdownTimer, Provider } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [target] = useState(() => Date.now() + 90_000);
  return (
    <Provider locale="en-GB">
      <div className="flex flex-wrap items-center gap-xl">
        <CountdownTimer target={target} label="Code expiry" />
        <CountdownTimer target={target} label="Code expiry" variant="ring" duration={120} warnAt={30} />
      </div>
    </Provider>
  );
}

Resend

When time is up, onComplete enables the button; a new target and key start the timer again.

The code expires in00:15

Send the code again

LightDark

Copy code

import { Button, CountdownTimer, Provider } from '@bigbang/ui';
import { useState } from 'react';

export default function Resend() {
  const [target, setTarget] = useState(() => Date.now() + 15_000);
  const [done, setDone] = useState(false);
  return (
    <Provider locale="en-GB">
      <div className="flex flex-col items-start gap-md">
        <p className="flex items-center gap-xs type-body-md text-fg-subtle">
          The code expires in
          <CountdownTimer key={target} target={target} label="Code expiry" warnAt={5} onComplete={() => setDone(true)} />
        </p>
        <Button
          variant="secondary"
          disabled={!done}
          onClick={() => {
            setDone(false);
            setTarget(Date.now() + 15_000);
          }}
        >
          Send the code again
        </Button>
      </div>
    </Provider>
  );
}

Light and dark mode

The ring track and colours come from tokens.

Light

01:3001:30

Dark

01:3001:30

Copy code

import { CountdownTimer, Provider } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [target] = useState(() => Date.now() + 90_000);
  return (
    <Provider locale="en-GB">
      <div className="flex flex-wrap items-center gap-xl">
        <CountdownTimer target={target} label="Code expiry" />
        <CountdownTimer target={target} label="Code expiry" variant="ring" duration={120} warnAt={30} />
      </div>
    </Provider>
  );
}