Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jenstornell/tinyratings.js
Really small rating star element with zero dependencies.
https://github.com/jenstornell/tinyratings.js
javascript js rating ratings star stars vanilla vanilla-javascript vanilla-js vote votes zero-dependency
Last synced: about 22 hours ago
JSON representation
Really small rating star element with zero dependencies.
- Host: GitHub
- URL: https://github.com/jenstornell/tinyratings.js
- Owner: jenstornell
- Created: 2018-11-10T17:05:13.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-21T13:39:02.000Z (about 6 years ago)
- Last Synced: 2024-01-14T08:12:17.218Z (about 1 year ago)
- Topics: javascript, js, rating, ratings, star, stars, vanilla, vanilla-javascript, vanilla-js, vote, votes, zero-dependency
- Language: JavaScript
- Homepage:
- Size: 51.8 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# tinyRatings.js
*Version 1.0*
Really small rating star element with zero dependencies.
## In short
- Only 1kb
- Vanilla JS
- Zero dependencies
- Super simple setup
- Callback support
## Usage
It just can't get any simpler than this. There is also an example in `index.html`.
### CSS
```html
```
### HTML
```html
```
### JS
```html
tinyRatings.init();
```
## Global options
### prefix
By default all the elements needed are prefixed with `tr`. In case of collision, you can change it.
```js
tinyRatings.init({
prefix: 'tr'
});
```
*If you change this option, you also need to change your CSS file.*
### stars
By default you will get a 5 star rating component. If that is not what you want, you can change it.
```js
tinyRatings.init({
stars: 5
});
```
### lock
if you only want show the rating, but want to prevent the user from rating, you can change `lock` to `true`.
```js
tinyRatings.init({
lock: false
});
```
### callback
If you need to trigger something when a star is set, you can use the callback. It will give you the element and the rating.
```js
tinyRatings.init({
callback: function(element, rating) {
console.log(element);
console.log(rating);
}
});
```
*The callback is only triggered if the user click a star, not if the rating is set programically.*
## Methods
These methods require you to have the tinyRatings init function setup before they could run.
### set
You can force a rating with a method like below. The first argument is the element and the second argument is the rating.
```js
tinyRatings.set(element, 5);
```
### clear
If you want to clear an element from stars, use the method `clear` like below.
```js
tinyRatings.clear(element);
```
The code above is a shorthand for `tinyRatings.set(element, 0);`.
## Donate
Donate to [DevoneraAB](https://www.paypal.me/DevoneraAB) if you want.
## License
MIT