# Quick start

## `@solidjs/router`

```tsx
import { Router, Route } from '@solidjs/router'
import { Suspense } from 'solid-js'
import { RouteProgress } from 'solid-route-progress/router'
import 'solid-route-progress/style.css'

const Layout = (props) => (
  <>
    <RouteProgress />
    <Suspense>{props.children}</Suspense>
  </>
)

<Router root={Layout}>
  <Route path="/" component={Home} />
</Router>
```

## SolidStart

```tsx
// src/app.tsx
import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import { Suspense } from 'solid-js'
import { RouteProgress } from 'solid-route-progress/router'
import './app.css'

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <RouteProgress />
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  )
}
```

A complete app, themed with Tailwind: [`examples/solidstart`](https://github.com/kecan0406/solid-route-progress/tree/main/examples/solidstart) ([open in StackBlitz](https://stackblitz.com/github/kecan0406/solid-route-progress/tree/main/examples/solidstart?file=src/app.tsx)).

## Without a router

```tsx
import { NavigationProgress } from 'solid-route-progress/navigation'

const Layout = (props) => (
  <>
    <NavigationProgress />
    {props.children}
  </>
)
```

[Navigation API](https://solid-route-progress.vercel.app/docs/navigation-api.md)

## Driving it yourself

```tsx
import { ProgressProvider, useProgress } from 'solid-route-progress'

<ProgressProvider>
  <RouteProgress />
  {children}
</ProgressProvider>
```

```ts
const progress = useProgress()

await progress.track(fetch('/api/items'))

const release = progress.start()
progress.set(0.6)
release() // release('error') · release('cancel')
```

[Controller](https://solid-route-progress.vercel.app/docs/controller.md) · [Examples](https://solid-route-progress.vercel.app/docs/examples.md)