Autocraft Documentation

Introduction

The Autocraft library provides reusable components for React and Vite projects to display an animated counter that increments to a specified value. It is easy to use, customizable, and optimized for performance.

Table of Contents

Installation

Install the library using NPM or Yarn:

npm install autocraft-ui

or

yarn add autocraft-ui

Available Components

The library provides the following components:

Usage

React Project Example


import React from "react";
import { AutoCounterReact } from "autocraft-ui";

function App() {
return (
<div>
<h1>React AutoCounter Example</h1>
<AutoCounterReact quantity={1000} delay={20} size="24" color="blue" />
</div>
);
}

export default App;

Vite Project Example


import React from "react";
import { AutoCounterVite } from "autocraft-ui";

function App() {
return (
<div>
<h1>Vite AutoCounter Example</h1>
<AutoCounterVite quantity={500} delay={15} size="20" color="green" />
</div>
);
}

export default App;

Component Props

Prop Type Default Description
quantity Number Required The final value the counter animates to.
delay Number 10 The delay in milliseconds between each increment.
size String/Number "18" The font size of the counter.
color String "black" The color of the counter text.

Error Handling

The component validates its inputs and throws errors for invalid values:

Styling

The counter is styled using inline styles. You can customize the size and color props to adjust its appearance.

License

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

How to Contribute

We welcome contributions! If you'd like to contribute, please follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature or bugfix.
  3. Make your changes and commit them.
  4. Push to your fork and open a pull request.

Authors

Created and maintained by Lokesh Kumar and Balaji.