485

TanStack Router

PreviousNext

Install and configure reactuse for TanStack Router.

Create project

Start by creating a new TanStack Router project:

npx create-tsrouter-app@latest my-app --template file-router --tailwind

Edit tsconfig.json file

Ensure your tsconfig.json includes path aliases:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Run the CLI

Run the useverse init command to setup your project:

npx useverse@latest init

This will create a configuration file reactuse.json in your project.

Add hooks

You can now start adding hooks to your project.

npx useverse@latest add useBoolean

The command above will add the useBoolean hook to your project. You can then import it like this:

src/routes/index.tsx
import { useBoolean } from '@/shared/hooks';
import { createFileRoute } from '@tanstack/react-router';
 
export const Route = createFileRoute('/')({
  component: Home
});
 
const Home = () => {
  const [on, toggle] = useBoolean();
 
  return (
    <div>
      <button type='button' onClick={() => toggle()}>
        Click me
      </button>
      <p>{on.toString()}</p>
    </div>
  );
};