@zendeskgarden/container-schedule

@zendeskgarden/container-schedule

This package includes containers relating to schedule in the Garden Design System.

Installation

npm install @zendeskgarden/container-schedule

Usage

Check out storybook for live examples.

As a hook

The useSchedule hook implements a schedule (timer) and communicates when it has elapsed.

import { useSchedule } from '@zendeskgarden/container-schedule';

const Animation = () => {
  const elapsed = useSchedule({ duration: 1000, delayMS: 0 });

  return <p>Percentage: {(elapsed * 100).toFixed(0)}%</p>;
};

As a Render Prop Component

import { ScheduleContainer } from '@zendeskgarden/container-schedule';

<ScheduleContainer duration={1000} delayMS={0}>
  {elapsed => <p>Percentage: {(elapsed * 100).toFixed(0)}%</p>}
</ScheduleContainer>;

Info

See react-loaders component as a non-trivial use of this.