> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/magicjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/magicjs/api-references/frontend/useparams.md).

# useParams() 

### Functionality Overview:

This utility retrieves parameters specified in your route paths, identified by values following colons ("`:`") in route declarations. It returns an object with keys representing parameter names and values reflecting actual URL values. Streamlining dynamic content handling, it empowers you to seamlessly display diverse content, fetch data, or regulate functionalities based on the current URL.

> Here's an example:

Imagine you have a route `"/products/:id."` In your `ProductDetails` component, leveraging `useParams` is as simple as:

```typescript
import { useParams } from '@magicjs.dev/frontend';

function ProductDetails() {
    const { id } = useParams();
    const product = getProductById(id); // Fetch product based on id param

    // Render product details using the `product` object
    return (
        <div>
            <h1>Product Details for ID: {id}</h1>
            {/* ... Display product information fetched using the id ... */}
        </div>
    );
}
```

[Click here to refer GitHub.](https://github.com/skyslit/magicjs.dev/blob/main/packages/frontend/src/index.tsx#L289)