React

Use Anti-AI UI Framework with React components and hooks for seamless integration.

Installation

Install via npm:

Installation
1.npm install anti-ai-ui react react-dom

Basic Usage

Import React components directly from the main package:

Basic Usage
1.import { RunawayButton } from 'anti-ai-ui';
2.

3.function App() {
4.  return (
5.    <div style={{ position: 'relative', height: '200px' }}>
6.      <RunawayButton
7.        buttonText="Submit"
8.        evasionDistance={140}
9.        speed={1.2}
10.        onCatch={() => {
11.          console.log('Button caught!');
12.        }}
13.      />
14.    </div>
15.  );
16.}

TypeScript Support

The framework includes full TypeScript definitions:

TypeScript
1.import { RunawayButton } from 'anti-ai-ui';
2.import type { RunawayButtonProps } from 'anti-ai-ui';
3.

4.interface FormProps {
5.  onSubmit: () => void;
6.}
7.

8.function MyForm({ onSubmit }: FormProps) {
9.  const buttonProps: RunawayButtonProps = {
10.    buttonText: 'Submit',
11.    evasionDistance: 140,
12.    speed: 1.2,
13.    onCatch: onSubmit
14.  };
15.

16.  return (
17.    <div style={{ position: 'relative', height: '200px' }}>
18.      <RunawayButton {...buttonProps} />
19.    </div>
20.  );
21.}

Server Components (React 18+)

Anti-AI components are client components, so they need the 'use client' directive in RSC environments:

Server Components
1.'use client';
2.

3.import { RunawayButton } from 'anti-ai-ui';
4.

5.export function ClientForm() {
6.  return (
7.    <RunawayButton
8.      buttonText="Submit"
9.      onCatch={() => console.log('Caught!')}
10.    />
11.  );
12.}
13.

14.// Then use in a server component:
15.import { ClientForm } from './ClientForm';
16.

17.export default function Page() {
18.  return (
19.    <div>
20.      <h1>My Page</h1>
21.      <ClientForm />
22.    </div>
23.  );
24.}

Best Practices

  • Container positioning: Ensure parent containers have proper positioning (relative/absolute) for RunawayButton
  • State management: Use React state to track verification status
  • TypeScript: Import types for better IDE support and type safety
  • Performance: Use keys to properly remount components when needed

Next Steps