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:
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: () => {} ,
...
}