svelte-counter v1.0.0
svelte-counter
A simple css-agnostic count-up component for Svelte 3.
Installation š§
First you need a Svelte 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:
npm install svelte-counter
How to use š
- First import the component on your svelte page's script section.
import Counter from 'svelte-counter';
- Declare your counter variables as one object like so (again in the script section):
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!
- Call the component where you want it to be placed e.g.:
<Counter values={counters} duration="5000" random="false" minspeed="200" let:counterResult>
<div>{counterResult.coffees} cups of coffee drunk</div>
<div>{counterResult.hours} hours worked</div>
<div>{counterResult.lines} lines of code written</div>
<div>{counterResult.clients} happy customers</div>
</Counter>
In the slot space between <Counter></Counter>
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:yourvariable="counterResult"
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
You can also look at the list of all the 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 |š° Cash
- Publicly thanks š¤
āØļø with ā¤ļø by rallisf1 š
4 years ago