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'
```

## Simple example

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

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

## Controlled

```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}
  props={{
    onChange: value => alert('Value ' + value + ' selected.')
  }}
/>