@zendeskgarden/container-schedule
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    @zendeskgarden/container-schedule npm version

    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.

    Install

    npm i @zendeskgarden/container-schedule

    DownloadsWeekly Downloads

    4,980

    Version

    2.0.0

    License

    Apache-2.0

    Unpacked Size

    28.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • zendesk-garden