import { useState, useEffect } from 'react'
import Progress from '../Progress'
import { Sandbox } from '@startupjs/docs'
import Button from '../Button'
import Br from '../Br'

# Progress

Progress is used to display the length of process, for example upload or download files.

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

## Simple example

```jsx example
return (
  <Progress value={10} />
)
```

## Interactive

```jsx example
const [value, setValue] = useState(0)
const [startProgress, setStartProgress] = useState(false)
const [countdown, setCountdown] = useState(false)

useEffect(() => {
  let interval
  if (startProgress) {
    interval = setInterval(() => {
      setValue(v => {
        const nextValue = countdown ? v - 1 : v + 1
        if (nextValue === 100 || nextValue === 0) {
          setCountdown(!countdown)
        }
        return nextValue
      })
    }, 100)
  }
  return () => clearInterval(interval)
}, [startProgress, countdown])

return (
  <>
    <Progress value={value} />
    <Br />
    <Button onPress={() => setStartProgress(!startProgress)}>
      {startProgress ? 'Stop' : 'Start'}
    </Button>
  </>
)
```

## Caption

```jsx example
return (
  <Progress value={50}>50 of 100</Progress>
)
```

## Sandbox

<Sandbox Component={Progress} block />