import { useState }  from 'react'
import Rating from '../Rating'
import { Sandbox } from '@startupjs/docs'

# Rating

Rating provides an ability for user to leave his opinion and view opinion of other users of a service or a product.

```jsx
import { Rating } from '@startupjs/ui'
```

## Example

Rating component provides five-star rating system. The `value` prop gets rounded to the nearest integer.

```jsx example
const [rated, setRated] = useState(0)
return (
  <Rating
    value={rated}
    onChange={(value) => setRated(value)}
  />
)
```

## Read only

The `readonly` prop prevents the user from changing the value of the rating and display the it in compact view (`false` by default).

```jsx example
return(
  <Rating value={4.5} readonly />
)
```

## Sandbox

<Sandbox Component={Rating} />