# Usage

You now have the choice between using your own `useAutocompleteT` hook - which provides real-time autocompletion - or using **Talkr**'s `useT` - which doesn't provide autocompletion - in your app.

```tsx
import { useAutocompleteT } from "./translate";

function App() {
  const { T } = useAutocompleteT();
  return (
    <>
      <h1>{T("feedback.success")}</h1>
      <h4>{T("user.describe.complex", { name: "joe", hobby: "coding" })}</h4>
    </>
  );
}
```

> 🤓 Pro-tip: since you will need to import `useAutocompleteT` from `translate.tsx`, it is highly recommended to add an alias `translate` to your builder's config and `tsconfig.json`.

This will allow you to write

```tsx
import { useAutocompleteT } from "translate" 👍
```

instead of

```tsx
import { useAutocompleteT } from "../../translate" 👎
```

> **Exemples:** `webpack`
>
> ```typescript
> resolve: {
>   extensions: [".ts", ".tsx", ".js", "jsx", ".json"],
>   alias: {
>       translate: path.resolve(__dirname, "src/translate/"),
>  }
> ```
>
> `tsconfig`
>
> ```json
> {"compilerOptions": {
>   "paths": {"translate/*": ["src/translate/*"] }
> }}
> ```
>
> for other bundlers, please refer to their respective documentations.

