TimeProgressBar

Its a react package to create progressbar component for your time interval.

#Online Demo

Package size:

    package size:     3.9KB     gzipped size:     1.5KB

Links:

    Npm link     Github link

Installation:

npm:

    npm install --save time-progress-bar

yarn:

    yarn add time-progress-bar

Usage exmaple:

<>
  <TimeProgressBar data={[{ start: "03:25:53", end: "18:06:00" }]} />

  <TimeProgressBar
    hourBar="primary"
    data={[
      { start: "03:25:53", end: "8:06:00" },
      { start: "09:25:53", end: "13:06:00", color: "red" },
      { start: "14:25:53", end: "19:06:00" },
    ]}
  />

  <TimeProgressBar
    hourBar="tertiary"
    data={[{ start: "03:25:53", end: "13:06:00", color: "gold" }]}
  />

  <TimeProgressBar
    className="some-classes"
    style={{ height: 60, paddingTop: 20 }}
    backgroundColor="#dff9fb"
    props={{
      style: { height: 11 },
      onClick: () => console.log("root"),
      // ...can set all root element props
    }}
    hourBar={
      <>
        <span style={{ fontSize: 13 }}>6 am</span>
        <span style={{ fontSize: 13 }}>6 pm</span>
      </>
    }
    data={[
      {
        start: "03:25:53",
        end: "13:06:00",
        color: "#22a6b3",
        className: "some-class",
        /*
        .some-class:hover .timebar-box div {
          display: block !important; 
        }
        */
        style: { cursor: "pointer" },
        children: (
          <div
            style={{
              position: "absolute",
              top: -45,
              left: 7.5,
              display: "none",
              padding: 6,
              backgroundColor: "#dff9fb",
            }}
          >
            Working time
          </div>
        ),
        props: {
          onClick: function (e) {
            e.stopPropagation();
            console.log("timebar");
          },
          // ...can set all element props
        },
      },
    ]}
  />
</>

DOCs:

TimeProgressBar Props:

className => string ( default: "" ) set className for time-progress-bar container style => undefined(default) or object set style for time-progress-bar container backgroundColor => set backgroundColor for root (default: "#F5F6F8") props => ...can set all root element props hourBar

• primary
• secondary(default)
• tertiary
• custom components(<span> 12 </span>)

data => create timebar components with these props:

data Props:

start => time start end => time end key => set your custom key for unique keynames color => timebar color children => set children in timebar to set extra data with hover or ... className => set string className props => can send any props that timebar(div) can have, and set with object {} ,Example: props: {    onClick: () => {} ,    style: {} ,    onMouseDown: () => {} ,    ... }