npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-custom-clock

v1.0.9

Published

A highly customizable React component for creating clocks with a wide range of styles and options.

Downloads

12

Readme

react-custom-clock

react-custom-clock is a highly customizable React component for creating clocks with a wide range of styles and options. It provides powerful customization features to suit various design needs, allowing you to build almost any clock style you can imagine. With no dependencies and extensive configuration options, it's perfect for integrating a clock into your React application.

Features

  • Extensive Customization: Customize every aspect of the clock, including the face, hands, ticks, and more.
  • No Dependencies: A standalone package with no external dependencies, only dev-dependencies.
  • Default Styles: Comes with default styles so you can use it out of the box without any props.
  • Real-time Updates: Supports real-time updates to reflect the current time dynamically.
  • Responsive Design: Adaptable to various screen sizes and resolutions.

Installation

To install the package, use npm or yarn:

npm install react-custom-clock

or

yarn add react-custom-clock

Usage

To use the react-custom-clock component, import it into your React application and include it in your JSX. You can configure the clock using the available options.

import React from "react";
import { Clock } from "react-custom-clock";

const App = () => {
  return (
    <div>
      <Clock />
    </div>
  );
};

export default App;

Configuration Options

The Clock component supports various options to customize its appearance and behavior. You can adjust the clock's face, hands, ticks, and interface settings according to your needs. Below are the key configuration options:

Face Options

  • background: The background color of the clock face.
  • padding: The padding around the clock face.
  • ticks: Configuration options for the ticks (markings) on the clock.
    • regular: Options for regular ticks.
    • secondary: Options for secondary ticks.
    • primary: Options for primary ticks.
  • counts: Configuration options for the count numbers on the clock.
    • hour: Options for hour counts.
    • minute: Options for minute counts.

Interface Options

  • dynamic: Enables or disables the time increments every second. If true, the clock updates every second. If false, the clock does not update dynamically.
  • showDiscreteTime: Determines if the clock should show discrete time. When enabled, the clock hands will align to discrete intervals (e.g., at 5:00, the hour hand will be exactly at 5). If disabled, the hands will be positioned smoothly between intervals.
  • transition: The duration of the transition effect (in milliseconds) for clock hand movements.
  • pivot: Configuration options for the pivot point of the clock hands.
    • size: The size of the pivot.
    • background: The background color of the pivot.

Hand Options

  • hourHand: Configuration options for the hour hand.
    • front: Options for the front part of the hour hand.
    • frontBase: Options for the front base of the hour hand.
    • back: Options for the back part of the hour hand.
  • minuteHand: Configuration options for the minute hand.
    • front: Options for the front part of the minute hand.
    • frontBase: Options for the front base of the minute hand.
    • back: Options for the back part of the minute hand.
  • secondHand: Configuration options for the second hand.
    • front: Options for the front part of the second hand.
    • frontBase: Options for the front base of the second hand.
    • back: Options for the back part of the second hand.

For detailed descriptions of each option, refer to the documentation provided in the source code or view the source code.

Contributing

Contributions are welcome! If you'd like to contribute to the development of react-custom-clock, please fork the repository and submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you have any questions or need help with react-custom-clock, please open an issue on the GitHub repository.