wojtekmaj / react-clock Goto Github PK
View Code? Open in Web Editor NEWAn analog clock for your React app.
Home Page: http://projects.wojtekmaj.pl/react-clock
License: MIT License
An analog clock for your React app.
Home Page: http://projects.wojtekmaj.pl/react-clock
License: MIT License
If I have multiple clocks and using the basic usage code, what's the best approach to mutate the state to show a different timezone for each clock?
E.g
Clock 1: UTC-6
Clock 2: UTC-5
Clock 3: UTC-2
Thanks!
Hi,
Can I use the same package for my react-native app ?or is there any alternate package available for the same
The analog clock is cool but is there support for a dropdown mode so that I can use that with the datetime widget ?
Thank you for this component!
When printing a webpage where clocks are displayed, the clocks do not print correctly, only their outline is printed.
A simple fix is to add the following css:
.react-clock {
-webkit-print-color-adjust: exact;
color-adjust: exact !important;
}
I have tested it with Chrome and Firefox.
I looked through the documentation, but it's not there. Specifically the white border, the size of the border, the red circle of the second hand, and the fluid second hand movement. Any chance the dev can share the settings?
Thanks.
I am getting this compilation error:
TS2589: Type instantiation is excessively deep and possibly infinite.
I attached a screenshot of a code snippet and these are my relevant dependencies:
"react": "18.2.0",
"react-clock": "^4.1.0",
"react-dom": "18.2.0",
"react-scripts": "5.0.1",
"typescript": "4.4.2",
Hi!
I leave a css trick to make react-clock responsive.
<React.Fragment className={'container'}>
<Clock value={value}/>
</React.Fragment>
.container {
width: 300px;
}
.react-clock {
width: inherit !important;
padding-top: 100%;
}
I hope you find it useful and thanks for your work.
Please include a prop with numbersType to be in persian or english format like this :
numbersType={"persian" || "english"}
// In english -> 12345...
// In persian -> ۱۲۳۴۵...
Thanks in advance .
Hi,
I can't seem to make the clock render correctly.
I made a new react project using create-react-app and followed the example from the docs but nothing is rendered
see exmpale here:
https://codesandbox.io/s/9vu0o?file=/src/App.js
is this package still supported?
In my nextjs project I imported and ran following the directions (simple example using pre-built css). I got the below error code. I'd love to use your clock but it doesn't look like it works :/.
Unexpected token .
/Users/patientplatypus/Documents/patientplatypus.com/forum/node_modules/react-clock/dist/Clock.css:1
(function (exports, require, module, __filename, __dirname) { .react-clock {
^
SyntaxError: Unexpected token .
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:656:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/Users/patientplatypus/Documents/patientplatypus.com/forum/node_modules/react-clock/dist/entry.js:12:1)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
I get really terrible performance when passing a Date
as value.
Broser: Chrome 80
OS: macOS
It seems as that the datetime attribute updates on every frame, see screenshot.
Code
import React, { useState } from 'react'
import Clock from 'react-clock'
// import './App.css'
function App() {
const [time, setTime] = useState(new Date())
setInterval(() => setTime(new Date()), 1000)
return (
<Clock
value={time}
/>
)
}
export default App
Edit: I'm testing in a create-react-app production build with npx serve build
Hi, I'm thinking that it could be nice to add a 'timezone': string prop to the clock, making it easier to display other timezones no matter what the local time of the user is.
It could be implemented using the ECMAScript Internationalization API, which takes into account the Daylight Saving Time offset with respect to UTC in the summer months.
Example (without having the timezone prop):
const getUTCDateForTimezone = (timeZone: string): Date => {
const format = new Intl.DateTimeFormat("en-US", {
timeZone, // options available in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
hour12: false,
});
const date = new Date();
const result = new Date(format.format(date));
result.setMilliseconds(date.getMilliseconds());
return result;
}
And then when adding the clock in React:
const [value, setValue] = useState(
getUTCDateForTimezone("Europe/Madrid")
);
useEffect(() => {
const interval = setInterval(
() => setValue(getUTCDateForTimezone("Europe/Madrid")),
1000
);
return () => {
clearInterval(interval);
};
}, []);
By the way, this topic is kind of related to #18
Is there a way I can add a drag event to the hands of the clock and set the time that way?
There is a way that I can customize the color of the pointers and hour/minutes marker?
Yarn is pulling in @types/react 18 into my react 17 project because of this transitive dependency which is causing type errors due to incompatible react definitions.
<TimePicker
allowEmpty={false}
use12Hours={true}
onFocus={ () => this.handleFocus()}
onChange={ (date) => this.props.handleTimeChange(date, 'click') }
showSecond={false}
id='service-time-picker'
/>
minTime={ new Date() } when trying to supply minTime new Date() is it supposed to disable past time and minutes?? please help thank you
I'm using react-datetimerange-picker which has react-clock
as a sub-dependency. When I try to run my NextJs app I get the following error:
Error: require() of ES Module /Users/dean/dev/oyoun-project/node_modules/react-clock/node_modules/get-user-locale/dist/esm/index.js from /Users/dean/dev/oyoun-project/node_modules/react-clock/dist/cjs/shared/hourFormatter.js not supported. Instead change the require of index.js in /Users/dean/dev/oyoun-project/node_modules/react-clock/dist/cjs/shared/hourFormatter.js to a dynamic import() which is available in all CommonJS modules.
I have in my package.json
the type: module
. I assume this is causing the error, which says I cannot use the require
statement.
Have you encountered this before?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.