React time input

For what is this?

• This is for a input times in hours, minutes and seconds.
• Uses cases can be for example how mutch time I wasted, how mutch time I work today...

How it works?

• You can work in milliseconds (For example 41848214 milliseconds = 11:37:28)
• You can work in hours format (11:37:28)

Extra features

• Have a function millisecondsToFormat which get time in MS as param and return HH:MM:SS
• Have a function formatToMilliseconds which get as params hours, minutes, seconds and return ms

Installation

Install react-timeinput executing :

$ npm install --save @teinorsa/react-timeinput

Usage

import ReactTimeInput from '@teinorsa/react-timeinput';
...
<ReactTimeInput {...props} />

Props

Dillinger is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.

| prop | type | default | ------ | ------ | ------ | | divKey | string or number | 1 | inputProps | object (here can be name, onChange...) | {} | renderHours | boolean | true | renderMinutes | boolean | true | renderSeconds | boolean | true | defaultValue | string (milliseconds or HH:MM:SS) | '' | worksInMilliseconds | boolean | true | styled | boolean | false | onChange | function (return val with MS or HH:MM:SS depending worksInMilliseconds) | false

Examples

Example 1

Code

import React from 'react';
import './App.css';
import ReactTimeInput from '@teinorsa/react-timeinput';
function App() {
  return (
    <div className="App">
      <ReactTimeInput divKey={1} defaultValue='41848214' worksInMilliseconds={true} styled={true}  />
    </div>
  );
}

export default App;

Result

Example 2

Code

import React from 'react';
import './App.css';
import ReactTimeInput from '@teinorsa/react-timeinput';
function App() {
  return (
    <div className="App">
        <ReactTimeInput 
            divKey={1} 
            defaultValue='35:40:13' 
            worksInMilliseconds={false}  
            renderSeconds={false} 
            inputProps={{name: 'mytimeinput', id: 'myid'}} 
        />
    </div>
  );
}

export default App;

Result