Package Exports

react-analog-time-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-analog-time-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Analog Time Picker

Simple and easy to use timepicker

Demo

https://react-analog-time-picker.netlify.app/

Installation

Install by executing npm i react-analog-time-picker or yarn add react-analog-time-picker. Import by adding import Clock from 'react-analog-time-picker. Use by adding <Clock />. Use onChange prop for getting new values.

React Analogue Time Picker requires Node.js v10+ to run.

Example

    import React, {useState} from "react";
    import Clock from 'react-analog-time-picker'
    
    export default function TimePicker(){
        const [value, setValue] = useState(new Date())
        const [selected, setSelected] = useState(null)
    
        const onTimeChange = function(time){
            setSelected(time)
        }
    
        return(
            <div>
                <Clock 
                    value={value}
                    onTimeChange={onTimeChange}
                    digitsColor={'white'}
                    fontsColor={'rgb(86, 142, 247)'}
                    backgroundColor={'white'}
                    handsColor={'rgb(86, 142, 247)'}
                    timeSetColor={'rgb(219, 139, 163)'}
                />
            </div>
        )
    }

User Guide

Prop name	Description	Default Value	Example values
onTimeChange	A function called when a time is selected	n/a	{ currentHour: Integer, currentMinute: Integer, isAm: Boolean, currentAmOrPm: String }
value	Initial time	n/a	new Date()
backgroundColor	Clock background color	white	'white', 'yellow', etc
fontsColor	Font color for the time picker	rgb(86, 142, 247)	'white', 'black', etc
digitsColor	Color for the clock digits	white	'white', 'yellow', 'blue', etc
handsColor	Color for the hands	rgb(86, 142, 247)	'green','blue', 'pink', etc
timeSetcolor	Color for the hands timeSet	rgb(219, 139, 163)'	'green','blue', 'pink', etc

License

MIT

author: rom.data

Would love to hear you thoughts and suggestion at i.mydata132@gmail.com