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 time picker

Demo

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

A Simple and easy to use timepicker

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-analogue-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={'blue'}
                    fontsColor={'yellow'}
                    backgroundColor={'white'}
                />
            </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	pink	'white', 'black', etc
digitsColor	Color for the clock digits	pink	'green', 'yellow', 'blue'

License

MIT