Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rallisf1/svelte-counter
A simple css-agnostic count-up component for Svelte 3.
https://github.com/rallisf1/svelte-counter
counter svelte svelte3
Last synced: 17 days ago
JSON representation
A simple css-agnostic count-up component for Svelte 3.
- Host: GitHub
- URL: https://github.com/rallisf1/svelte-counter
- Owner: rallisf1
- License: mit
- Created: 2020-04-23T15:53:01.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-27T09:18:07.000Z (about 1 month ago)
- Last Synced: 2024-10-11T03:50:57.739Z (28 days ago)
- Topics: counter, svelte, svelte3
- Language: Svelte
- Size: 20.5 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-counter
A simple css-agnostic count-up component for Svelte 3.
## Installation 🔧
First you need a [Svelte](https://svelte.dev) 3 project. Its starter template lives at https://github.com/sveltejs/template.
Then install the component by running the following command in your project's directory:
```sh
npm install svelte-counter
```
## How to use 🚀
1. First import the component on your svelte page's script section.
```js
import Counter from 'svelte-counter';
```
2. Declare your counter variables as one object like so (again in the script section):
```js
export let counters = {
'coffees' : 88,
'hours' : 1600,
'lines' : 6132,
'clients' : 22
}
```
_You can use anything *valid* you like for variable & key names, it doesn't matter!_
3. Call the component where you want it to be placed e.g.:
```html
{counterResult.coffees} cups of coffee drunk
{counterResult.hours} hours worked
{counterResult.lines} lines of code written
{counterResult.clients} happy customers
```
In the slot space between `` you can write your template however you like. Use the same keys you declared above for the counterResult object in your template.
_I recommend not to change the "counterResult" object name. If you need to you can do it like so:_
```
let:counterResult={yourvariable}
```
### Configuration Options
All the following options are optional:
| Name | Default | Description |
| ---- | ------- | ----------- |
| duration | 5000 | Effect duration in milliseconds |
| random | false | Randomize the counting (might go even backwards) |
| minspeed | 20 | The fastest it will tick in milliseconds, larger means slower |
## Missing ❌
* Decimals support - Could do it but most people only want integer counters. Will update upon request.
* Tests - It's pretty straight forward but feel free to contribute.
* Demo Page - Will do.
## Contribution 🖇️
Feel free to fork. If you find a bug or got something great to add make a pull request!
## Authors ✒️
* ** John Rallis ** - * Initial Work * - [rallisf1](https://github.com/rallisf1)
You can also look at the list of all the [contributors](https://github.com/rallisf1/svelte-counter/contributors) who have participated in this project.
## License 📄
This project is free to use, edit & distribute under the MIT License.
## Expressions of Gratitude 🎁
* Tell others about this project 📢
* Buy me a beer 🍺 or coffee ☕ | ₿ [Crypto](https://freewallet.org/id/rallisf1/) |💰 [Cash](https://www.paypal.me/rallisf1)
* Publicly thanks 🤓
---
⌨️ with ❤️ by [rallisf1](https://github.com/rallisf1) 😊