TimeProgressBar

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

#Online Demo

$3

    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

$3

``jsx
<>


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" },
]}
/>

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

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={
<>
6 am
6 pm

}
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: (

style={{
position: "absolute",
top: -45,
left: 7.5,
display: "none",
padding: 6,
backgroundColor: "#dff9fb",
}}
>
Working time

),
props: {
onClick: function (e) {
e.stopPropagation();
console.log("timebar");
},
// ...can set all element props
},
},
]}
/>

`

DOCs:

#

$3

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( 12 `)





data => create timebar components with these props:

$3

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

   ...

}