485

Astro

PreviousNext

Install and configure reactuse for Astro.

Create project

Create a new Astro project and choose a React setup:

npm create astro@latest

If React is not already installed in the project, add the official integration:

npx astro add react

Edit tsconfig.json file

Ensure your tsconfig.json includes path aliases:

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

Run the CLI

Run the useverse init command to set up your project:

npx useverse@latest init

This creates a reactuse.json config file in your project.

Add hooks

Add hooks with the CLI:

npx useverse@latest add useBoolean

Then import and use the hook in a React component:

src/components/Counter.tsx
import { useBoolean } from '@/shared/hooks';
 
export const Counter = () => {
  const [on, toggle] = useBoolean();
 
  return (
    <div>
      <button type='button' onClick={() => toggle()}>
        Click me
      </button>
      <p>{on.toString()}</p>
    </div>
  );
};