https://github.com/emrekara37/svelte-rate-it

Rate component for Svelte
https://github.com/emrekara37/svelte-rate-it

Last synced: 3 months ago
JSON representation

Rate component for Svelte

• Host: GitHub
• URL: https://github.com/emrekara37/svelte-rate-it
• Owner: emrekara37
• License: mit
• Created: 2019-07-29T09:57:09.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-04T05:07:52.000Z (almost 2 years ago)
• Last Synced: 2024-07-07T21:44:09.766Z (4 months ago)
• Language: JavaScript
• Homepage: https://svelte.dev/repl/d0df2df581d9438eabdcd529be759812?version=3.6.10
• Size: 289 KB
• Stars: 38
• Watchers: 3
• Forks: 1
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte Rate It

> Rate component for Svelte. Based on [vue-rate](https://github.com/SinanMtl/vue-rate).

Thanks [@SinanMtl](https://github.com/SinanMtl)

> [Demo](https://svelte.dev/repl/d0df2df581d9438eabdcd529be759812)

## Installation and usage

Install rate component for your project

```bash

npm install svelte-rate-it --save

```

or with yarn

```bash

yarn add svelte-rate-it

```

Import Svelte Rate into your app

```javascript

import Rate from "svelte-rate-it/Rate.svelte";

```

Use HTML template

```html

```

## Options from props

- `length {number}`: Star size

```html

```

- `value {number}`: Default value

```html

```

- `showCount {boolean}`: Shows rate number when mouseover the star.

```html

```

- `ratedesc {object}`: Rate star description array. 

```html

```

- `disabled {boolean}`: Disable rate.

```html

```

- `readonly {boolean}`: Read-only rate.

```html

```

## Events

```javascript

const beforeRate = rate => {

    console.log(rate);

  };

  const afterRate = rate => {

    console.log(rate);

  };

})

```

```html

```