React Router

Install and configure reactuse for React Router.

Create project

npx create-react-router@latest my-app

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. Ensure your tsconfig.json has path aliases (React Router often uses ~/*). If you use @/*, add:

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

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:

app/routes/home.tsx

import { useBoolean } from '~/shared/hooks';
 
import type { Route } from './+types/home';
 
export const meta = () => [
  { title: 'Home' },
  { name: 'description', content: 'Welcome to React Router!' }
];
 
const Home = () => {
  const [on, toggle] = useBoolean();
 
  return (
    <div className='flex min-h-svh flex-col items-center justify-center'>
      <button type='button' onClick={() => toggle()}>
        Click me
      </button>
      <p>{on.toString()}</p>
    </div>
  );
};
 
export default Home;

If your reactuse.json uses @/shared/hooks, use that alias instead of ~/shared/hooks.

TanStack Router