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

$3

Install react-timeinput executing :

``

sh

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

$3

sh

import ReactTimeInput from '@teinorsa/react-timeinput';

...





$3



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

sh

import React from 'react';

import './App.css';

import ReactTimeInput from '@teinorsa/react-timeinput';

function App() {

  return (

    

      

    

  );

}



export default App;



#### Result

!ResulteExample1



#### Example 2



#### Code

sh

import React from 'react';

import './App.css';

import ReactTimeInput from '@teinorsa/react-timeinput';

function App() {

  return (

    

                    divKey={1} 

            defaultValue='35:40:13' 

            worksInMilliseconds={false}  

            renderSeconds={false} 

            inputProps={{name: 'mytimeinput', id: 'myid'}} 

        />

    

  );

}



export default App;

``
#### Result
!ResulteExample2

React time input

$3

Install react-timeinput executing :

``

sh

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

$3

sh

import ReactTimeInput from '@teinorsa/react-timeinput';

...





$3



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

sh

import React from 'react';

import './App.css';

import ReactTimeInput from '@teinorsa/react-timeinput';

function App() {

  return (

    

      

    

  );

}



export default App;



#### Result

!ResulteExample1



#### Example 2



#### Code

sh

import React from 'react';

import './App.css';

import ReactTimeInput from '@teinorsa/react-timeinput';

function App() {

  return (

    

                    divKey={1} 

            defaultValue='35:40:13' 

            worksInMilliseconds={false}  

            renderSeconds={false} 

            inputProps={{name: 'mytimeinput', id: 'myid'}} 

        />

    

  );

}



export default App;

``
#### Result
!ResulteExample2